slelect 控件添加change事件
<el-select
filterable
v-model="ruleForm.nodeSigner"
:placeholder="$t('phrase.Pleaseselect')"
maxlength="18"
class="w240"
@change="onSelectChange"
>
<el-option
v-for="item in formItems"
:key="item.dictCode"
:label="item.dictName"
:value="item.dictCode"
:title="item.dictName"
></el-option>
</el-select>
添加函数获取label值
//获取label
onSelectChange(){
const option = this.formItems.find(option => option.dictCode === this.ruleForm.nodeSigner);
this.ruleForm.nodeSignerName = option ? option.dictName : '';
},
多级 el-cascader
<template>
<div>
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
:props="{ checkStrictly: true }"
></el-cascader>
<p>Selected Labels: {{ selectedLabels }}</p>
</div>
</template>
JavaScript 部分
<script>
export default {
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{ value: 'yizhi', label: '一致' },
{ value: 'fankui', label: '反馈' }
]
},
{
value: 'daohang',
label: '导航',
children: [
{ value: 'cexiangdaohang', label: '侧向导航' },
{ value: 'dingbudaohang', label: '顶部导航' }
]
}
]
}
],
selectedOptions: [],
selectedLabels: []
};
},
methods: {
handleChange(value) {
this.selectedLabels = this.getLabelsByValues(this.options, value);
},
getLabelsByValues(options, values) {
let labels = [];
const findLabels = (opts, vals) => {
for (let i = 0; i < opts.length; i++) {
if (vals[0] === opts[i].value) {
labels.push(opts[i].label);
if (vals.length > 1) {
findLabels(opts[i].children, vals.slice(1));
}
break;
}
}
};
findLabels(options, values);
return labels;
}
}
};
</script>