elementUI——级联选择器（el-el-cascader）

1、需要实现的需求:
后端返回所有数据的数组，根据数组显示一级二级单位。
数组样子：

1）先在el-form中加上

<el-cascader style="font-size: 14px;" 
  placeholder="类目搜索：请输入类目名称" 
  //配置选项
  :props="defaultParams"
  :options="options" 
  v-model="addShopName"
  ref="cascaderAddr" 
  @change="splitChange" 
  filterable clearable></el-cascader>
1
2
3
4
5
6
7
8
9

2）data中定义变量

 data: {
 //修改表头及表格样式
Header: {
'background-color': '#EDEEF4',
'color': '#33333F',
'height': '52px'
  },
tableLoading: false,
addShopName: [],
options: [],
beforeMerchantId: '',
defaultParams: { 
label: 'levelName',
value: 'typeId',
children: 'typeList'
 }

},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4）获取级联选择中最后一级的label值，先获取选中的所有节点的路径
this.$refs[‘自定义的ref名字’].getCheckedNodes()[0].pathLabels

 /**
* 获取最后一级的label值
 * @param {*} e 
 */
handleCascader(e, form, thsAreaCode) {
this.$nextTick(() => {
   const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes() // 获取当前点击的节点
    this.shopNameTwo = checkedNodes[0].data.levelName;//最后一级的value值
    this.shopName = checkedNodes[0].pathLabels[0];//一级名
     this.needtypeId = checkedNodes[0].data.typeId;//最后一级label值
     //循环选中每一级的value值 并用 >> 隔开
      this.titleName = checkedNodes[0].pathLabels.join(">>")
     })
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现效果：