vue 表格中的下拉框单选、多选处理

最近在用vue做前后端分离，需要在表格中用到下拉框，由于需求变动，从最开始的单选变为多选，折腾了许久，记录一下，供后人铺路

vue 中的表格下拉框单选

collectionsColnumOptions  ：后台传递的数据，格式为List<Map> ，可按项目实际需要替换为List<Object>,  供数据回显

colnumtablesOptions  :下拉框的数据，格式为数组

<el-table
        :data="collectionsColnumOptions"
        v-show="active === 1"
        style=" 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>

vue 中的表格下拉框多选处理

　　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(",");
            }
          })