使用Element的时候，组件并没有提供select下拉和级联选择器获取选中value对应的label的方法，不过我们可以通过获取组件对象然后拿到对应的label
在select组件上绑定一个ref
<el-select v-model="form.settleNo"
ref="settleName"
@focus="getAllSupplier"
@change="settleNoChange"
:loading="loading.supplier"
filterable
size="small"
placeholder="结算对象">
<el-option v-for="item in supplierList"
:label="item.name"
:key="item.supplierNo"
:disabled="!item.id"
:value="item.supplierNo"></el-option>
</el-select>
| 组件 | 对应的字段 | 类型 |
|---|---|---|
| cascader级联 单选 | this.$refs.xxx.currentLabels | 数组 |
| cascader级联 多选 | this.$refs.xxx.checkedNodes | 数组，遍历查找，label和value就是要的结果，看下面截图就明白 |
| select 单选 | this.$refs.xxx.selectedLabel | 字符串 |
| select 多选 | this.$refs.xxx.selected | VueComponent，数组，遍历查找，currentLabel和currentValue就是对应的label和value |
其中select多选和级联多选略微麻烦一点，需要遍历，不过根本不算什么难事
级联多选
image.png
再比如radio，checkbox组，有机会可以多试试直接获取组件对象，没准也有惊喜？
网友评论