element-ui cascader级联选择器中同时获取到选中项的id和name

上一个博客中我写了怎么获取到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

赞赏作者

扫一扫支付

 支付宝支付  微信支付