VUE ElementUI 表格多選框實現單選

需求：將 table 中的 radio 改為 checkbox 並保持同樣的效果

HTML部分：

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      ref="multipleTable"
      @select-all="onSelectAll"
      @selection-change="selectItem"
      @row-click="onSelectOp">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>

@select-all="onSelectAll"  全選事件

在點擊全選的時候，把所有的選中狀態清空，執行 clearSelection() ；

@selection-change="selectItem" 選中某一個 checkbox 事件

做判斷，選中數量大於一就把上一個選中的數據勾選狀態改為 false ，把新的數據勾選狀態設為 true ，並賦值給 multipleSelection 數組，方便調用

@row-click="onSelectOp" 單擊某行事件

單擊某行，就把某行的選中狀態設為 true ，在此之前執行 clearSelection()

 

具體代碼：

    methods: {
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      selectItem(rows) {
        if (rows.length > 1) {
          var newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false);
              return false;
            }
          });
          this.multipleSelection = newRows;
        } else {
          this.multipleSelection = rows;
        }
      },
      onSelectOp(row) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, true);
        this.multipleSelection = [];
        this.multipleSelection.push(row);
      },
    }

 

參考文檔： http://www.manongjc.com/detail/15-kotxswczpcdsvru.html