韶华小苑 |

时光不负终不老

您现在的位置是: 首页 > 文章 >

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

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

小美女 2021-01-16 暂无评论 暂无分类 29

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

本文链接: https://hw13.cn/1c82a7e2023d47d143fc3838094d4228.html 最后修改时间: 2021-01-16 15:37:55

瞅我来气不?用红包砸死我吧

赞赏作者
扫一扫支付