机构检索、元器件检索、层级检索 - 智能设备管理平台
<template>
<div>
<el-main>
<h2 style='color: rgb(0, 106, 255);'> 机构检索:</h2>
<el-input v-model='input' style='width:40%' placeholder='请输入机构名称'></el-input>
<p><el-button type='primary' @click='search1(input)'>搜索</el-button></p>
<h2 style='color: rgb(0, 106, 255);'> 元器件及其数量检索:</h2>
<el-select v-model='value' placeholder='请选择元器件1'>
<el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
<!--           -->
<el-input-number v-model='num1' label='元器件数量' ></el-input-number>
<el-select v-model='value2' placeholder='请选择元器件2'>
<el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
<!--           -->
<el-input-number v-model='num2' label='元器件数量' ></el-input-number>
<el-select v-model='value3' placeholder='请选择元3件'>
<el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
<!--           -->
<el-input-number v-model='num3' label='元器件数量' ></el-input-number>
<!--           -->
<el-button type='primary' size='big' @click='search2(item)'>搜索</el-button>
<el-button type='primary' size='big' @click.native.prevent='deleteRow(scope.$index)'>重置</el-button>
<h2 style='color: rgb(0, 106, 255);'> 层级检索:</h2>
<div class='block'>
<span class='demonstration'>请选择依次选择类别、属性、特性:</span>
<el-cascader :options='options' :props='props' clearable></el-cascader>
<el-button type='primary' @click='search3(item)'>搜索</el-button>
</div>
</el-main>
</div>
</template>
<script>
export default {
data(){
return{
input:'',
option:[{
value:'选项1',
label:'伺服电机'},
{value:'选项2',
label:'变频器'},
{value:'选项3',
label:'电磁阀'},
{value:'选项4',
label:'反射传感器'},
{value:'选项5',
label:'对射传感器'},
{value:'选项6',
label:'接近开关'},
{value:'选项7',
label:'微动开关'},
{value:'选项8',
label:'扫码器'}],
value:'',
value2:'',
value3:'',
num1:'',
num2:'',
num3:'',
props: { multiple: true },
options: [{ value: 1, label: '搬运',
children: [{ value: 2, label: '线性式',
children: [ { value: 3, label: '单轴' }, { value: 4, label: '多轴搬运' }, { value: 5, label: '气缸机构' } ] }]},
{ value: 6, label: '检测段工艺',
children: [{ value: 7, label: '参数品质',
children: [ { value: 8, label: '胶钉检测' }, { value: 9, label: '盖帽检测' }, { value: 10, label: '焊后检测' },{ value: 11, label: '盖帽检测' },{ value: 12, label: '测厚' },{ value: 13, label: '扫码称重' },{ value: 14, label: '扫码' },{ value: 15, label: '氦检' } ]},
{ value: 16, label: '电池工艺',
children: [ { value:17, label: '激光焊接' }, { value: 18, label: '电池抽负压' } ] },
{ value: 19, label: '外观质量',
children: [ { value: 20, label: '大面检测' }, { value: 21, label: '盖板检测' } ]}]},
{ value: 22, label: '物流输送',
children: [{ value: 23, label: '单向输送',
children: [ { value: 24, label: '定位' }, { value: 25, label: '无阻挡' }, { value: 26, label: '阻挡' } ] },
{ value: 27, label: '换向转运',
children: [ { value: 28, label: '单出口顶升横移' }, { value: 29, label: '多出口顶升横移' } ] },
{ value: 30, label: '提升机',
children: [ { value: 31, label: '定向' }, { value: 32, label: '阻挡' } ] }] }
] };
},
//methods里放方法，方法名字自己取，HTML里绑定的叫啥这里就叫啥
methods:{
search1(y){ //上面传的参数是item，在这里自己取名为y
alert(y)
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
},
search2(y){ //上面传的参数是item，在这里自己取名为y
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
},
search3(y){ //上面传的参数是item，在这里自己取名为y
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
}
}
}
</script>
<p>我在搜索框里面输了内容进去，但是点击搜索健后传送给后端显示的是空值，这怎么解决</p>
<template>
<div class='table-container'>
<div class='title'>搜索结果显示</div>
<div class='list-box'>
<table
class='el-table el-table--border '>
<tbody>
<tr v-for='(item, index) in tableData' :key='index'> <!-- 第一行 行 --><!-- v-for是Vue的循环语句，遍历数组 -->
<td> <!-- 第一行 内容 -->
<div >
<span class='num'>{{index+1}}. </span>
<span class='name' @click='nameClick(item)'>机构名字：{{item.institution}}</span> <!-- index+1让序号从1开始 -->
<!-- @click是点击事件，nameClick()是自己定义的方法(函数)，当点击按钮，则JS执行这个函数。相当于给机构名字绑定了一个名叫nameClick的点击事件 -->
</div>
<ul class='info'> <!-- 第二行 无序列表 -->
<li> <!--列表第一个元素 -->
<span class='strong'>一级分类：</span>{{item.primaryClassification}}
</li>
<li> <!--列表第2个元素 -->
<!-- <span class='shuxing'>属性：</span>
<span class='strong'>{{item.leibie}}</span> -->
<span class='strong'>二级分类：</span>{{item.secondaryClassification}}
</li>
<pre><code> </ul>
<p class='info-text'>{{item.xinxi}}</p > <!-- 第三行 一段文字 -->
</td>
</tr>
</tbody> <!-- 对表格中的主体内容分组 -->
</table>
</div>
</code></pre>
</div>
</template>
<script>
//引入请求的方法
import request from '@/utils/request';
export default {
data() {
return {
search1:'',
tableData:[
// {
// id:1,
// institution: '单向有阻挡输送1',
// type:'物流线输送',
// property: '单向输送',
// peculiarity:'阻挡',
// xinxi:'这里是关于机构111的简介这里是关于机构111的简介这里是关于机构111的简介这里是关于机构111的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序HomingtonHomeStartTime(In:= NOT stProcessStatus.xInHomePos,PT:=T#3S);IF stProcessControl.xHomePosStart AND tonHomeStartTime.Q THEN stProcessStatus.xInHomePos:=TRUE;stProcessStatus.xHomeActive:=FALSE;END_IF;',
// },
// {
// id:2,
// institution: 'XYY搬运1',
// type:'搬运',
// property: '线性式',
// peculiarity:'多轴搬运',
// xinxi:'这里是关于机构222的简介这里是关于机构222的简介这里是关于机构222的简介这里是关于机构222的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序',
// },
// {
// id:3,
// institution: '单向有阻挡输送2',
// type:'物流线输送',
// property: '单向输送',
// peculiarity:'阻挡',
// xinxi:'这里是关于机构333的简介这里是关于机构333的简介这里是关于机构333的简介这里是关于机构333的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序',
// },
// {
// id:4,
// institution: '胶钉检测1',
// type:'搬运',
// property: '线性式',
// peculiarity:'单轴',
// xinxi:'这里是关于机构444的简介这里是关于机构444的简介这里是关于机构444的简介这里是关于机构444的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序',
// },
// {
// id:5,
// institution: '单向定位1',
// type:'物流线输送',
// property: '单向输送',
// peculiarity:'定位',
// xinxi:'这里是关于机构555的简介这里是关于机构555的简介这里是关于机构555的简介这里是关于机构555的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序',
// },
// {
// id:6,
// institution: '单向无阻挡输送1',
// type:'物流线输送',
// property: '单向输送',
// peculiarity:'无阻挡',
// xinxi:'这里是关于机构666的简介这里是关于机构666的简介这里是关于机构666的简介这里是关于机构666的简介',
// jigoutu:'jigoutu1.png',
// liuchengtu:'liuchengtu1.png',
// daiding:'这里是待定内容这里是待定内容这里是待定内容这里是待定内容这里是待定内容',
// chengxu:'这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序这里是程序',
// }
]
}
},
//methods里放方法，方法名字自己取，HTML里绑定的叫啥这里就叫啥(nameClick就是自己定义的点击方法)
methods:{
nameClick(x){ //上面传的参数是item，在这里自己取名为x
//指定跳转地址
this.$router.push({
name: 'Info', //跳转页面的路由名字
params: x, //传递给下一个页面的参数
});
},
//定义请求方法（获取列表），执行这个函数，获取查询结果(从后端取数据)
getList(params){ //此处的参数就是要传递给后端的形参，后端需要知道要什么才能返回相应的值
return request({
url: '/material/search/common', //接口地址
method: 'get',
params //传递的参数，也就是搜索页面传过来的
})
}
},
//参数传过来之后需要接受参数才能使用，mounted表示页面加载完后执行，
mounted(){
this.search1=this.$route.params; //a把传递过来的y赋给变量search1,这个变量需要在data里定义
//this.getList(this.search1); //调用请求
//this.tableData=this.getList(this.search1);//把tableData改成请求回来的值
this.getList(this.search1).then(res => {
this.tableData = res.data.rows
console.log(res)
})
},
}
</script>
<p>这个是table组件内容：在搜索框里输入内容后，点击搜索按钮，将内容传给后端的方法是<code>search1()</code>，在<code>search1()</code>方法中，将<code>input</code>保存到<code>search1</code>变量中，然后将<code>search1</code>作为参数传递给<code>getList()</code>方法。</p>
<p>在<code>getList()</code>方法中，使用<code>axios</code>库发送请求到后端接口，并传递<code>search1</code>作为参数。后端接口需要根据传递的参数进行相应的查询操作，然后返回查询结果。</p>
<p>在<code>mounted()</code>生命周期钩子中，调用<code>getList()</code>方法，并将查询结果赋值给<code>tableData</code>变量，从而显示在页面上。</p>
<p>在<code>getList()</code>方法中，使用<code>axios</code>库发送请求到后端接口，并将<code>search1</code>作为参数传递给后端。后端接口需要根据</p>
原文地址: https://www.cveoy.top/t/topic/pla1 著作权归作者所有。请勿转载和采集!