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()