Element-ui的select下拉框传递多个参数方法

最新推荐文章于 2024-07-03 09:40:23 发布

Cheng Lucky

最新推荐文章于 2024-07-03 09:40:23 发布

阅读量4.2k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44255044/article/details/115756857

版权

本文介绍了如何在Element-ui的select组件中传递多个参数，包括使用`value-key`属性绑定对象以及通过`@change`事件传递额外参数。示例代码展示了如何在选项改变时获取并设置选中项的code和name属性，适用于需要在表单编辑时更新多个字段的情况。

摘要由CSDN通过智能技术生成

Element-ui的select下拉框传递多个参数方法

<el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel">
   <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>
options: [
       {
         value: "选项1",
         id: 1,
         code: "xuanxiang1",
         label: "黄金糕"
       },
]
 currentSel(selVal) {
       this.code = selVal.code;
       this.name = selVal.label;
       console.log("选择的name为：" + this.name, "选择的code为:" + this.code);
       console.log(selVal);
   },

或者 (给change函数添加实参形参)

<el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="value=>{currentSel(value,1)}">
   <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>
options: [
       {
         value: "选项1",
         id: 1,
         code: "xuanxiang1",
         label: "黄金糕"
       },
]
 currentSel(e,num) {
       this.code = selVal.code;
       this.name = selVal.label;
       console.log("选择的name为：" + this.name, "选择的code为:" + this.code);
       console.log(selVal);
   },

修改时需要需要接收一个对象

this.editFormField.sale_name = {
  id_number: info.sale_id_card,
  supplier_name: info.sale_name,
  contacts_phone: info.sale_phone,
};
this.editFormField.purchase_name = {
  merchant_id_number: info.purchase_id_card,
  merchant_mobile_phone: info.purchase_phone,
  merchant_name: info.purchase_name,
};