最近在用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(",");
            }
          })