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中设置一个r