ElementUI中的el-table怎樣實現多選與單選

場景

實現多選非常簡單: 手動添加一個el-table-column，設type屬性為selection即可。

多選效果

 

 

單選效果

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

實現多選

在el-table中添加一個el-table-column 設置類型為selection即可

        <el-table v-loading="loading" :data="dkszList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="工號" align="center" prop="gh"/>
        </el-table>

並且通過

@selection-change="handleSelectionChange"

設置其所選項改變事件，在事件對應的方法handleSelectionChange中

      // 多選框選中數據
      handleSelectionChange(selection) {
        //獲取所有選中項的gh(工號)屬性的值
        this.ghs = selection.map(item => item.gh)
        //獲取所有選中項數組的長度
        this.selectedNum = selection.length
      },

其中selection是作為選中項的一個數組，可以通過map方法來獲取對應gh列即工號列的所有值

其中this.ghs 和 this.selectedNum 要提前聲明

    data() {
      return {
        // 選中數組
        ghs: [],
        //選中的記錄數量
        selectedNum:0,

效果

 

 

實現單選

        <el-table
          v-loading="loading"
          :data="kqryszList"
          @selection-change="handleSelectionChange"
          ref="tb"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="工號" align="center" prop="gh" />
        </el-table>

與實現多選類似，需要添加一列類型為selection。

除了設置其選項改變事件外，還需要設置其ref屬性。

設置ref的目的是能在方法中通過

this.$refs.tb

獲取這個table

在方法handleSelectionChange中

    // 單選框選中數據
    handleSelectionChange(selection) {
      this.checkedGh = selection[0].gh;
      if (selection.length > 1) {
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(selection.pop());
      }

    },

此方法的實現邏輯就是，通過設置的ref屬性和 this.$refs.tb來獲取這個table，

然后判斷選擇項的數組selection的長度大於1的話就清除數組並設置選擇最后一次選中的項。

並且通過

this.checkedGh = selection[0].gh;

獲取選項行的gh屬性的值。

其中checkedGh需要提前在

  data() {
    return {
      //選中的工號
      checkedGh: [],

聲明。

效果