場景

效果如下

注：

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

實現

首先頁面新增一個el-table,然後繫結其資料來源為bcglXiangXiList，

並且通過

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

添加了勾選框。

然後通過@selection-change="handleDetailSelectionChange設定其勾選框改變事件。

這裡的資料來源bcglXiangXiList要提前宣告

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

這裡的每一列是不同的控制元件，但是最終都要有v-mode進行動態資料繫結。

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

這裡的資料來源是個陣列，所以繫結的每一行都是一個物件，怎樣將每行與資料庫源對應起來？

首先怎樣實現第一列的序號欄位。

這裡通過設定el-table的

:row-class-name="rowClassName"

來實現，其中rowClassName是回撥函式。

所以需要在函式中實現rowClassName

    rowClassName({ row, rowIndex }) {
      //把每一行的索引放進row.id
      row.xh = rowIndex + 1;
    },

其中row是行物件，rowindex是行號，從0開始。

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

然後怎樣實現勾選框單選？

通過設定el-table的

@selection-change="handleDetailSelectionChange"

來實現

對應的實現方法handleDetailSelectionChange中

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

這裡的section本來是多選時選中項的陣列，這裡通過 this.$refs.tb獲取到這個el-table，但是要提前給這個el-table設定

ref="tb"

然後判斷所選的陣列的長度大於1就清空並選中當前行，否則就將當前選中的賦值給checkedDetail,

所以需要提前宣告checkedDetail

      //選中的從表資料
      checkedDetail: [],

這樣在上面對這個el-table綁定了資料來源之後

就可以通過類似

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

這種來進行動態資料繫結。

實現新增一行

新增按鈕

<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">新增</el-button>

在新增按鈕對應的點選事件中

    handleAddDetails() {
      if (this.bcglXiangXiList == undefined) {
        this.bcglXiangXiList = new Array();
      }
      let obj = {};
      obj.ts = "1";
      obj.dkdd = "1";
      obj.sjfw = ["07:00","07:30"];
      obj.jxsjfw = ["06:00","12:00"];

      this.bcglXiangXiList.push(obj);
    },

前面先對資料來源進行判斷是不是undefined，因為在清空時會將其設定為undefined，所以需要重新新建。

然後構建一個物件並賦值。將此物件新增進資料來源bcglXiangXiList即可。

實現刪除一行

前面已經對其勾選事件進行了重寫，在勾選後將勾選的內容儲存到了checkedDetail

所以在刪除前判斷是否選中了一行就可以通過判斷其長度即可。

刪除一行按鈕

            <el-button
              type="success"
              icon="el-icon-delete"
              size="mini"
              @click="handleDeleteDetails"
            >刪除</el-button>

然後在刪除按鈕對應的事件中

    handleDeleteDetails() {
      if (this.checkedDetail.length == 0) {
        this.$alert("請先選擇要刪除的資料", "提示", {
          confirmButtonText: "確定",
        });
      } else {
        this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
      }
    },

這裡首先判斷是否已經選擇了一行，如果選擇了一行之後

就可以通過儲存的選中項的this.checkedDetail[0].xh -1獲取當前行的index，而這個index正好與資料來源中的index是想對應的。

然後將此條資料在資料來源中去掉即可實現刪除一行。

其中splice方法是表示從第一個索引引數開始，刪除第二個引數個元素。

清空所有行

清空按鈕

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDeleteAllDetails"
            >清空</el-button>

清空按鈕對應的事件中

    handleDeleteAllDetails() {
      this.bcglXiangXiList = undefined;
    },

將資料來源設定為undefined即可。