ElementUI中的el-table怎樣實現綁定對象數組時每一列不同控件的動態數據綁定

場景

ElementUI中的el-table中實現動態添加一行、刪除一行、清空所有行：

https://mp.csdn.net/console/editor/html/107815187

上面實現的效果如下

 

 

其中每一行都是動態添加的，每一行對應的是一個對象，每一列對應的是一個對象的屬性。

所以整個el-table綁定的數據源就是一個對象的數組。

但是在頁面上實現時怎樣實現每一列的動態數據綁定。

首先添加一個el-table

 

       <el-table
          v-loading="loading"
          :data="bcglXiangXiList"
          :row-class-name="rowClassName"
          @selection-change="handleDetailSelectionChange"
          ref="tb"
        >
          <el-table-column type="selection" width="30" align="center" />
          <el-table-column label="序號" align="center" prop="xh" width="50"></el-table-column>

          <el-table-column label="開始時間/最早時間-結束時間/最晚時間" width="250" prop="sjfw">
            <template slot-scope="scope">
              <el-time-picker
                is-range
                format="HH:mm"
                value-format="HH:mm"
                :style="{width: '100%'}"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                range-separator="至"
                clearable
                @change="changesjfw(scope.row)"
                v-model="bcglXiangXiList[scope.row.xh-1].sjfw"
              ></el-time-picker>
            </template>
          </el-table-column>

          <el-table-column label="指定天數" align="center" prop="ts" width="150">
            <template slot-scope="scope">
              <el-select
                clearable
                @change="changezdts(scope.row)"
                v-model="bcglXiangXiList[scope.row.xh-1].ts"
              >
                <el-option
                  v-for="dict in zdtsOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="打卡地點" align="center" prop="dkdd" width="150">
            <template slot-scope="scope">
              <el-select
                clearable
                @change="changedkdd(scope.row)"
                v-model="bcglXiangXiList[scope.row.xh-1].dkdd"
              >
                <el-option
                  v-for="dict in dkddOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="最小井下累計時間-最大井下累計時間" width="250" prop="jxsjfw">
            <template slot-scope="scope">
              <el-time-picker
                is-range
                format="HH:mm"
                value-format="HH:mm"
                :style="{width: '100%'}"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                range-separator="至"
                clearable
                @change="changejxsjfw(scope.row)"
                v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"
              ></el-time-picker>
            </template>
          </el-table-column>
        </el-table>

其他代碼解釋見上面博客，這里主要介紹動態綁定這塊。

首先整個表的數據源通過:data="bcglXiangXiList"綁定到一個對象數組。

此數組需要提前聲明

  data() {
    return {
      //詳細list
      bcglXiangXiList: [],

然后在添加每一列時是通過類似於

 v-model="bcglXiangXiList[scope.row.xh-1].sjfw"

這種來進行動態綁定，其中scrope.row就是當前行對象。

scope.row.xh就是當前行的xh列的值，即上面el-table中的第一列

<el-table-column label="序號" align="center" prop="xh" width="50"></el-table-column>

其中此列值的賦值又是通過行的索引+1來獲取。

所以這里就是為什么在進行動態數據綁定時是要拿row.xh-1

因為行號和數組的索引都是從0開始，而我們要展示的序號是從1開始。

那么怎樣才能給xh列設置行號加1那。

通過設置el-table的

:row-class-name="rowClassName"

來實現。

其中rowClassName是回調函數

    rowClassName({row, rowIndex}) {< BR>
      row.xh = rowIndex +1;
    },

其中row是行對象，rowindex是行號，從0開始。

所以這樣就能實現了序號(xv屬性)遞增並且取值為行號加1。

這樣在進行后台傳遞參數時就能動態獲取多個對象的參數。

注意此時的序號xh是沒法進行動態數據綁定的，所以在傳遞后台參數時 不要傳遞此參數。