韶华小苑 |

时光不负终不老

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

element 下拉选择框如何同时获取到选中的id和

element 下拉选择框如何同时获取到选中的id和

小美女 2021-01-14 暂无评论 前端 68

今天在写代码的时候遇见了这么一个需求,有一个下拉选择框,当我选中其中一项的时候需要获取到它相对应的id和name传给后端

<el-form-item label="选择商品:" prop="goods" v-if="isShow" :rules="this.$rules.select">
    <template> 
        <el-select placeholder="请选择商品" class="el-input-width" v-model="form.goods" @change="getGoodsId($event)">
            <el-option v-for="(item,index) in goodsList" :label="item.goods_name" :value="item.id" :key="index"></el-option>
        </el-select>
    </template>
</el-form-item>

一开始我只能获取到其中一个的值,:value="item.id"的时候获取到的是选项的id,:value="item.name"的时候获取到的是name,那么,怎么才能同时获取到呢

接下来,我尝试设置:value="item",获取到全部选项,再进行单独获取,但是这样的话下拉框突然出错了,就是我选择的是a选项,它显示b选项,且一直显示b选项,当我选择改变的时候

接下来我就查资料,同时获取这两项,最后尝试了下面的写法,终于成功了。

<el-form-item label="选择商品:" prop="goods" v-if="isShow" :rules="this.$rules.select">
    <template> 
        <el-select placeholder="请选择商品" class="el-input-width" v-model="form.goods" @change="getGoodsId($event)">
            <el-option v-for="(item,index) in goodsList" :label="item.goods_name" :value="`${item.id}|${item.goods_name}`" :key="index"></el-option>
        </el-select>
    </template>
</el-form-item>

这样的写法打印出来的数据是:id|name
那我们操作数据的时候就要给他分开,并单独获取值

// 获取选中的商品id
getGoodsId(val){
    let [id, name] = val.split('|')
    this.goods_id = id
    this.goods_name = name
    this.getType(this.goods_id)
}

好了,这样就可以同时获取下拉框的id和name了

参考链接:
https://www.jianshu.com/p/da2e59a42660

本文链接: https://hw13.cn/ffa33ccaf5316aea2bd8ecbd7af5f0dd.html 最后修改时间: 2021-01-14 17:50:34

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

赞赏作者
扫一扫支付