vue el-select 中 v-model 绑定的值以及如何进行回显


<el-select v-model="categorySelect" value-key="category_id" style="width:300px; height:32px !important;font-size:12px">
<el-option
v-for="item in cats"
:key="item.category_id"
:label="item.category_name"
:value="item">
</el-option>
</el-select>

:value对应的值是v-model绑定的值,item此时是个对象,因此在取用选中这个对象中的其他数据的时候会非常方便。

value-ley中绑定的属性名对应着:key中的属性名,回显对象中的  {value-key绑定的属性值 = :key中绑定的对象的值},即可回显成功   value-key 中的名称需和:key值保持一致

categorySelect: {category_id: 12, category_name: "奶茶"},

 

列表页点编辑按钮时 赋值:

editGoods: function(index) {
var that = this;

that.shopgoods = that.itemsList[index];

// that.categorySelect = {category_id:13, category_name:'鸡尾酒'};

that.categorySelect = {category_id:parseInt(that.itemsList[index].category_id), category_name:that.itemsList[index].category_name};

},

编辑页点保存时:

updateMallGoods(){

that.shopgoods.category_id = that.categorySelect.category_id;

}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM