ElementUI中的el-table怎樣實現每一列顯示的是控制元件並能動態實現雙向資料繫結

阿新 • • 發佈：2020-08-06

場景

要實現在ElementUI的表格中每一列展示的不是資料而是控制元件。效果如下

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

普通表格官方示例程式碼

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width 
="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export  
default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name:  
'王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

要實現每列中使用的是控制元件的話可以使用

template來實現

          <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>

這裡是在此列使用下拉框控制元件作為模板

這裡要新增slot-scope屬性。新增這個屬性可以在後面獲取到某一行。

完整示例程式碼

       <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>

在使用可控制元件之後再使用v-model進行雙向資料繫結時就是動態資料綁定了。

這裡首先設定el-table的資料來源為一個物件陣列

          :data="bcglXiangXiList"

然後新增一個單選框

<el-table-column type="selection" width="30" align="center" />

通過@selection-change="handleDetailSelectionChange"

設定其勾選事件

    //單選框選中資料
    handleDetailSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(selection.pop());
      } else {
        this.checkedDetail = selection;
      }
    },

實現單選並儲存選中項。

前提要設定el-table的ref="tb"並且this.checkedDetail 需要提前宣告

  data() {
    return {
      //選中的從表資料
      checkedDetail: [],

然後添加了一列序號用來儲存行的索引號，通過設定el-table的

 :row-class-name= "rowClassName"

來實現

    rowClassName({ row, rowIndex }) {

      row.xh = rowIndex + 1;
    },

然後怎樣對每個控制元件進行v-model資料繫結，通過

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

使用scope.row可以獲取到當前行物件。

通過scope.row.xh可以獲取到當前行的xh欄位屬性，因為之前設定了xh為行的索引+1

而陣列的索引從0開始，所以這裡是xh-1

            <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>