vue 表格中的下拉框單選、多選處理

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