vue el-select/el-cascader获取选中的对象label值
1.el-select获取选中对象label值
<el-form-item label="车辆配置" prop="sales_name">
<el-select
v-if="!showSaleNameInput"
v-model="form.sales_name"
clearable
ref="itemSelect"
size="mini"
class="form-item-width"
>
<el-option
v-for="(item, index) in sales_name_list"
:key="index"
:label="item.sales_name"
:value="item.level_id"
></el-option>
</el-select>
</el-form-item>
获取正常情况下我们通过el-select获取到的值是value对应的code码,如果需要获取label值可以听过下面方式获取
let sales_name = this.$refs.itemSelect.selectedLabel
或者
let sales_name = this.$refs.itemSelect.selected.currentLabel
// 注意!!!!:一定要是在nextTick数据更新后才会有正确的值
this.$nextTick(() => {
let sales_name = this.$refs.itemSelect.selectedLabel
})
2.1.el-cascader获取选中对象label值
<el-form-item
label="品牌/车系/排量/年款"
prop="carmodel"
label-width="120"
required
>
<carmodel-cascader
style="width: 240px;"
ref="cascader"
v-model="form.carmodel"
placeholder="请选择"
clearable
size="mini"
:level="4"
@change="handleCarmodelChange"
></carmodel-cascader>
</el-form-item>
听过v-model获取到值的是对应的code码值,如果需要获取label值可以这样获取
handleCarmodelChange(data) {
this.form.carmodel = data
this.form.brand = null
this.form.series = null
this.form.displacement = null
this.form.year = null
try {
const checkedNodes = this.$refs['cascader'].$refs[
'cascader'
].getCheckedNodes()
if (checkedNodes && checkedNodes[0]) {
const pathLabels = checkedNodes[0].pathLabels
if (pathLabels) {
this.form.brand = pathLabels[0]
this.form.series = pathLabels[1]
this.form.displacement = pathLabels[2]
this.form.year = pathLabels[3]
}
}
} catch (error) {}
},
通过getCheckedNodes选中的数据有个弊端,就是通过输入框搜索获取到的数据然后选择的时候会无法获取到节点数据,通过getNodeByValue方法可以获取到搜索选择的数据,代码如下:
handleCarModelSelect(data) {
// 获取节点 拿到品牌车系名字
this.form.carmodel = data
this.form.brand = null
this.form.series = null
this.form.displacement = null
this.form.year = null
try {
const checkedNodes = this.$refs['cascader'].$refs[
'cascader'
].panel.getNodeByValue(data)
if (checkedNodes) {
const pathLabels = checkedNodes.pathLabels
if (pathLabels) {
this.form.brand = pathLabels[0]
if (pathLabels.length > 1) {
this.form.series = pathLabels[1]
}
if (pathLabels.length > 2) {
this.form.displacement = pathLabels[2]
}
if (pathLabels.length > 3) {
this.form.year = pathLabels[3]
}
}
}
} catch (error) {}
},