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

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>

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

            }

          })