最近在用vue做前后端分离，需要在表格中用到下拉框，由于需求变动，从最开始的单选变为多选，折腾了许久，记录一下，供后人铺路
collectionsColnumOptions ：后台传递的数据，格式为List<Map> ，可按项目实际需要替换为List<Object>, 供数据回显
colnumtablesOptions :下拉框的数据，格式为数组
<el-table :data="collectionsColnumOptions" v-show="active === 1" style="width: 100%;text-align: center" height="300"> <el-table-column prop="name" label="数据标准" width="130"> </el-table-column> <el-table-column prop="attr_code" label="数据标准字段" width="110"> </el-table-column> <el-table-column prop="expression" label="表达式" title="expression" width="130"> </el-table-column> <el-table-column label="表字段" width="270" type="index"> <template slot-scope="scope" > <el-col :span="28"> <el-select v-model="scope.row.table_field" size="medium" placeholder="未匹配" filterable allow-create > <el-option v-for="item in colnumtablesOptions " :key="item" :label="item" :value="item"> </el-option> </el-select> </el-col> </template> </el-table-column> </el-table>
1. 在 el-select 标签里加入 multiple 属性，开启多选
2.由于开启了多选，那么v-model中的值必须转为数组格式的，所以在获取 collectionsColnumOptions 数据的方法中处理
listCollectionField 是查询回显数据的方法
listCollectionField(id).then(response => { this.collectionsColnumOptions=response.data; //表格内的多选框的回显处理 for (let i = 0; i <this.collectionsColnumOptions.length ; i++) { let data=this.collectionsColnumOptions[i].table_field; this.collectionsColnumOptions[i].table_field=data.split(","); } })
原文：https://www.cnblogs.com/zhixinSHOU/p/13435009.html