vue+element+table 實現表格多選變單選框

vue的element默認可選擇表單只有多選框，想要變為單選框選擇可以自己設置，也可以變為點擊行列表后做相應事件。

這里記錄單選變多選設置：

1： 首先template內：

                <!-- 人員表格 -->
                <el-table
                  ref="multipleTable"
                  :data="persionTable"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55">
                  </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>

1：

@selection-change="handleSelectionChange" 

是重點改變點擊選擇框后的事件：

2：ref="multipleTable" 是必須的，后面會用到這個的實例方法clear 用來清空所有勾選項

具體實現方法內也很簡單：

 // 勾選框
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else {
        this.multipleSelectionUpdate = val;
      }
      // this.multipleSelectionUpdate = val[0];// 這種賦值同樣不會實時更新
      this.$set(this.multipleSelectionUpdate, val[0]);
      console.log(this.multipleSelectionUpdate, this.multipleSelection); // 此時要回顯到頁面的值
    },

利用判斷來判斷如果超過一個勾選框就先清空最后把當前最新勾選的那一項放入用來儲存勾選容器this.multipleSelectionUpdate內

注意點： 需要注意不實時更新的bug： this.$set(this.multipleSelectionUpdate, val[0]);

 

 

 

如果簡化寫法，簡單用，這樣寫也同樣可以快速單選切換：

handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      }
    },