VUE中el-select搜索框的联动

最新推荐文章于 2025-04-02 07:51:43 发布

置顶 lanksi

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量5k

点赞数 3

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/hjq3625292001/article/details/125364993

版权

本文介绍了在Vue中如何实现el-select组件的搜索框联动效果，通过模拟数据展示了如何根据产品选择更新设备列表。首先，将两个数据源连接，然后在前端编写代码，利用v-for和@change事件监听，当产品选择变化时更新设备列表。示例代码包括了el-select组件的使用及data中的数据定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>