ElementUI中的el-table怎樣實現每一列顯示的是控件並能動態實現雙向數據綁定

場景

要實現在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>