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>
2)data中定义变量
data: {
//修改表头及表格样式
Header: {
'background-color': '#EDEEF4',
'color': '#33333F',
'height': '52px'
},
tableLoading: false,
addShopName: [],
options: [],
beforeMerchantId: '',
defaultParams: {
label: 'levelName',
value: 'typeId',
children: 'typeList'
}
},
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(">>")
})
}
实现效果: