場景

實現多選非常簡單: 手動新增一個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: [],

宣告。

效果