VUE中el-select搜索框的联动
VUE中el-select搜索框的联动
·
VUE中el-select搜索框的联动
如果后端的API能够提供给前端相对应的接口那么就不需要这么麻烦
本文只是将模拟数据进行链接
相关代码
首先需要将两个数据源进行连接,也就是有关联
productID: [
{
id: 'BSKZ1M8L7D',
name: 'ddd'
},
{
id: '5F6G44S5K2',
name: '222'
},
{
id: 'NZN97H1SBX',
name: 'USB插座'
},
{
id: 'E7UHRRO8QF',
name: '光照度传感器'
},
{
id: '33UDBAQ8J5',
name: '设备'
},
{
id: 'KFQ99QKD23',
name: '子设备'
},
{
id: '9CIRYPL3JD',
name: '测试网关'
}
],
deviceList: [
{
id: '9CIRYPL3JD',
name: 'gateway1'
},
{
id: 'KFQ99QKD23',
name: 'z1'
},
{
id: 'KFQ99QKD23',
name: 'z2'
},
{
id: 'KFQ99QKD23',
name: 'z3'
},
{
id: 'KFQ99QKD23',
name: 'z4'
},
{
id: 'KFQ99QKD23',
name: 'z5'
},
{
id: '33UDBAQ8J5',
name: 'dev1'
},
{
id: '33UDBAQ8J5',
name: 'dev2'
},
{
id: 'E7UHRRO8QF',
name: 'sensor1'
},
{
id: 'E7UHRRO8QF',
name: 'sensor2'
},
{
id: 'NZN97H1SBX',
name: 'usb1'
},
{
id: 'NZN97H1SBX',
name: 'usb2'
},
{
id: 'NZN97H1SBX',
name: 'usb3'
}
],
当然有时候会是父子组件类似于parent[children[]]这样的形式,这种json格式会更加方便的转化为相关树形结构从而达到搜索框联动
准备完数据以后我们就开始编写前端的一些代码了
<el-select
v-model="quaryform.productSelect"
placeholder="请选择产品"
size="mini"
class="history_item"
style="width: 130px"
@change="productModel"
>
<el-option v-for="item in productID" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select
v-model="quaryform.equipmentSelect"
placeholder="请选择设备"
size="mini"
class="history_item"
style="width: 130px"
@change="equipment"
>
<el-option v-for="item in deviceName" :key="item.name" :label="item.name" :value="item.name" />
同时我们也要在相关的data中写好相应的值,不然会出现错误,通过@change编写函数
<script>
export default {
data(){
return{
//对应v-model中的值
quaryform: {
selectVal: '', // 部门选择
productSelect: '', // 产品选择
equipmentSelect: '', // 设备选择
elementSelect: '' // 元素选择
},
//将数据拷贝到里面
productID: [
{
id: 'BSKZ1M8L7D',
name: 'ddd'
},
{
id: '5F6G44S5K2',
name: '222'
},
{
id: 'NZN97H1SBX',
name: 'USB插座'
},
{
id: 'E7UHRRO8QF',
name: '光照度传感器'
},
{
id: '33UDBAQ8J5',
name: '设备'
},
{
id: 'KFQ99QKD23',
name: '子设备'
},
{
id: '9CIRYPL3JD',
name: '测试网关'
}
],
deviceName: [],
deviceList: [
{
id: '9CIRYPL3JD',
name: 'gateway1'
},
{
id: 'KFQ99QKD23',
name: 'z1'
},
{
id: 'KFQ99QKD23',
name: 'z2'
},
{
id: 'KFQ99QKD23',
name: 'z3'
},
{
id: 'KFQ99QKD23',
name: 'z4'
},
{
id: 'KFQ99QKD23',
name: 'z5'
},
{
id: '33UDBAQ8J5',
name: 'dev1'
},
{
id: '33UDBAQ8J5',
name: 'dev2'
},
{
id: 'E7UHRRO8QF',
name: 'sensor1'
},
{
id: 'E7UHRRO8QF',
name: 'sensor2'
},
{
id: 'NZN97H1SBX',
name: 'usb1'
},
{
id: 'NZN97H1SBX',
name: 'usb2'
},
{
id: 'NZN97H1SBX',
name: 'usb3'
}
],
}
},
//转化数据
methods:{
productModel(val){
const roles = []
this.deviceName = []
for (var i of this.deviceList) {
if (val === i.id) {
console.log(i)
roles.push({
id: i.id,
name: i.name
})
}
this.deviceName = roles
}
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)