选择器和级联选择器的使用，以及级联选择器找如何找二级id_多选级联选择器,数据出现两次 ids[]: 1 ids[]: 2-CSDN博客

本文链接：https://blog.csdn.net/m0_61702149/article/details/125318262

这篇博客详细介绍了如何在Vue.js中使用el-cascader和el-select组件进行级联选择和多选操作。内容包括组件的属性配置，如`:props`、`:value`、`:label`等，以及事件监听如`@change`。示例代码展示了如何处理级联选择的变化事件，传递选中项的ID，并提供了远程搜索和多选选择器的实现。此外，还涵盖了el-select的多选模式及其在表单中的应用。

摘要由CSDN通过智能技术生成

template部分

<el-cascader
   :options="list"
   :props="props"  //这点最主要,别的官网都有,配置在data里
   placeholder="级联选择器"
   style="width: 200px"
   :show-all-levels="false"  // 输入框中是否显示选中值的完整路径
   clearable  // 是否支持清空选项
   v-model="value"
   @change="el_cascader_change" // 当选中节点变化时触发
   expandTrigger="hover" // 选择方式是hover 还是click
   filterable // 是否可搜索选项
/>

script部分

props: {
  value: 'id', //后端要传什么,这里就写什么,我们要的id
  label: 'name', // 级联选择器的字段
  children: 'child',
  emitPath: false, //改变的时候,只要最后一级的值,(这里我要的id)
},
// 模拟后端传来的数组
list: [
  {
    id: 1,
    name: '指南',
    child: [{
       id: 11,
       name: '设计原则',
     },
     {
       id: 12,
       name: '一致'
     }]
   }, 
   {
     id: 2,
     name: '组件',
     child: [{
        id: 21,
        name: 'Basic',
     }]
    }, 
    {
      id: 3,
      name: '资源',
      child: [{
         id: 31,
         name: 'Axure Components'
      }, 
      {
         id: 32,
         name: 'Sketch Templates'
      }, 
      {
         id: 33,
         name: '组件交互文档'
      }]
    }
]

methods:方法

el_cascader_change(e) {
   console.log(e) //得到最后一级id
},

选择器

<el-select
        v-model="listQuery.name"
        placeholder="请选择"
        clearable
        filterable 
        remote //支持远程
        reserve-keyword //关键字
        :remote-method="getListNames" //远程方法
        @change="el_select_change" //改变
        @clear="clear" //清楚事件
        class="filter-item"
        style="width: 320px"
        no-match-text="没有名字" //没数据展示
        ref="select_ns"
>
        <el-option
          v-for="(item, index) in names"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
</el-select>

选择器（多选）

<el-form-item label="账号角色" class="departmentName">
   <el-select
       v-model="form.role"
       multiple
       placeholder="请选择"
       style="width: 100%"
       @change="el_cascader_change" // 变化的是id
   >
       // 后端返回的形式是 [{name:'',id:''},{}]
       <el-option
           v-for="(item, index) in roleIds"
           :key="index"
           :label="item.name"
           :value="item.id" // 变化的是id
       />
   </el-select>
</el-form-item>

// 当 改变时触发
el_cascader_change(event) {
   // console.log(event); 数组,内容是id
   this.roles = event; // 把这个数组传递后端就可以了 删除不用管,自己就会传正确
},