element-ui table多選CheckBox參數解析

element-UI里的table表格與多選框CheckBox的組合很常用,官網也給了很多參數,自己總結了一下,方便日后使用

1、簡易用法,沒有附加的功能

要在表格里使用CheckBox很簡單,只需設置type就可以

<!-- 在table中添加selection-change的處理函數,回調函數可以拿到選中的數組 -->
<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  @selection-change="handleSelectionChange">
  <!-- 只需在表格里多加一列.設置type="selection"就可以 -->
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  .
  .
  .
</el-table>

// method
handleSelectionChange (val) {
  console.log(val)
}

 

2、切換選中的表格,默認選中表格

使用表格的toggleRowSelection可以切換表格的選中狀態,也可以設置表格的默認選中行

<!-- 在table中設置一個ref,就可以使用表格的方法了 -->
<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  .
  .
  .
</el-table>

// method
// 處理表格數據,已還款的自動選上
  handleCheckData () {
    let table = this.tableData2 // 從后台獲取到的數據
    table.forEach(item => {
      if (item.status === '已還款') {
        // toggleRowSelection可以切換表格行的選中狀態,接收兩個參數第一個是要切換的行,這里需要的對象格式,
        // 第二個參數是設置選中還是不選中,不傳的話會取與原來相反的選擇狀態
        // 方法調用要等元素掛載才后才能執行,這里加一個判斷,這個方法要放在數據獲取后
        this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, true)
      }
    })
  }

3、設置表格行為不可選

通過selectable參數可以手動設置某些表格行未不可選擇

<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  @selection-change="handleSelectionChange">
  <!-- 在type="selection的列里添加selectable參數,通過函數返回true或false可以設置是否可選" -->
  <el-table-column
    type="selection"
    :selectable="handleDisable"
    width="55">
  </el-table-column>
  .
  .
  .
</el-table>

// method
// 處理表格數據,未還款的默認不能勾選
// 有兩個參數返回,表格的每一行對象和當前索引
handleDisable(row, index) {
  // 函數需要一個返回值,true為可選,false為不可選擇
  if (row.status === '未還款') {
    return false
  } else {
    return true
  }
}

 

4、保存數據更新前選中的數據

通過reserve-selection和row-key搭配使用,可以設置保留數據更新前的選中值(分頁刷新數據等)

<!-- 在table里設置row-key參數 -->
<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  :row-key="handleReserve"
  @selection-change="handleSelectionChange">
  <!-- 在type="selection的列里添加reserve-selection參數,true為保留數據,默認為false不保留 -->
  <el-table-column
    type="selection"
    reserve-selection
    width="55">
  </el-table-column>
  .
  .
  .
</el-table>

// method
// 表格數據處理,保存上一頁選中的數據
// 返回的參數是每一行的值,需要指定表格數據的唯一值,一般是id
handleReserve (row) {
  return row.id
}

 

5、其他的一些方法

// 清除選中的數據

this.$refs.checkTable.clearSelection()

// 切換所有行的選中狀態

this.$refs.checkTable.toggleAllSelection()

 

補充內容:

select的reserve-selection和toggleRowSelection一起用時,比如下面的場景,選擇左邊表格數據,右邊對應展示列表,點擊右邊的列表也能控制左邊的表格選中狀態

這種場景會出現一個問題,當你在第一頁選中數據,跳轉到第二頁又選擇數據,再跳轉回第一頁時,刪除第一頁選中的數據會不能取消選中狀態,具體如圖

 

 

 

 

一開始的代碼是這樣的

 <div class="contanier">
      <div class="table-contanier">
        <el-table
          ref="checkTable"
          :data="tableData"
          border
          style="width: 100%"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            reserve-selection
            width="55"
          />
          <el-table-column
            label="姓名"
            prop="name"
          />
          <el-table-column
            label="年齡"
            prop="age"
          />
          <el-table-column
            label="班級"
            prop="class"
          />
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="30"
          @current-change="changePage"
        />
      </div>
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          {{ item.name }} <el-button type="text" @click="removeName(item)">刪除</el-button>
        </li>
      </ul>
    </div>
 methods: {
   // 表格選中
    handleSelectionChange(val) {
      console.log('選中的表格', val)
      this.list = val
    },
    // 刪除,取消表格選中
    removeName(item) {
      this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, false)
    }
  }

出現這種問題的原因是因為當你從第二頁跳轉回第一頁,你的tableData是從后台從新獲取並賦值的,在當前頁取消選中狀態時,列表里的item和左邊表格tableData里的數據雖然值一樣,但是此時他們指向的內存地址不一樣.所以,不能再傳列表里的item了

解決方法

handleSelectionChange(val) {
      console.log('選中的表格', val)
      this.list = val
    },
    // 刪除,取消表格選中
    removeName(item) {
      const arr = this.tableData.filter(sub => { return sub.id === item.id }) // 取消當前表格里的選中狀態時,用表格里的數據
      const row = arr.length ? arr[0] : item
      // console.log(item, row)
      this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(row, false)
    },