element-ui cascader级联选择器中同时获取到选中项的id和name
element-ui cascader级联选择器中同时获取到选中项的id和name
小美女 2021-01-16 暂无评论 暂无分类 173
上一个博客中我写了怎么获取到el-select中选中项的id和name,今天需求就更新了,原先的选项是只有一组的,现在是两级选项,而我需要可以选择任意一级选项,这个时候就需要用到我们的el-cascader了,因为它可以选择任意一级,还可以多选,那么,这个要怎么同时获得选中项的id和name呢
下面是我的代码,获得全部选项的数组
// 获取商品列表
getGoodsList(){
let _res = []
getCategory().then((res) => {
if(res.status == 1){
_res = res.resource
_res.forEach(item => {
item.value = item.category_id
item.label = item.category_name
item.children = item.second_category
item.children.forEach(item0 => {
item0.value = item0.goods_id
item0.label = item0.goods_name
})
})
this.goodsList = _res
}
})
},
el-cascader
<el-form-item label="选择商品:" prop="goods">
<el-cascader v-model="form.goods" :options="goodsList" :clearable="true" @change="change" placeholder="请选择商品" class="el-input-width">
</el-cascader>
</el-form-item>
当选中的选项发生变化的时候,它得到的是选中项的id,那么,怎么才能同时得到name呢
那就是在他原先的代码上加一个ref,即:
<el-form-item label="选择商品:" prop="goods">
<el-cascader v-model="form.goods" :options="goodsList" :clearable="true" @change="change" placeholder="请选择商品" class="el-input-width" ref="getSelectName">
</el-cascader>
</el-form-item>
在change方法中
// 获取选中的商品的id
change(val){
this.goods_id = val[1]
let name = this.$refs['getSelectName'].getCheckedNodes()[0].pathLabels
this.goods_name = name[1]
},
通过this.$refs['getSelectName'].getCheckedNodes()[0].pathLabels
就可以得到选中项的name了
这是element定义的一个方法,链接:https://element.eleme.cn/#/zh-CN/component/tree
瞅我来气不?用红包砸死我吧

