element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用

1、简易用法,没有附加的功能

要在表格里使用CheckBox很简单,只需设置type就可以

       
         
          
          
          .  .  .
       // methodhandleSelectionChange (val) {  console.log(val)}

 

2、切换选中的表格,默认选中表格

使用表格的toggleRowSelection可以切换表格的选中状态,也可以设置表格的默认选中行

         
           
            
            .  .  .
         // method// 处理表格数据,已还款的自动选上  handleCheckData () {    let table = this.tableData2 // 从后台获取到的数据    table.forEach(item => {      if (item.status === '已还款') {        // toggleRowSelection可以切换表格行的选中状态,接收两个参数第一个是要切换的行,这里需要的对象格式,        // 第二个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态        // 方法调用要等元素挂载才后才能执行,这里加一个判断,这个方法要放在数据获取后        this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, true)      }    })  }

3、设置表格行为不可选

通过selectable参数可以手动设置某些表格行未不可选择

           
            
            
            .  .  .
         // method// 处理表格数据,未还款的默认不能勾选// 有两个参数返回,表格的每一行对象和当前索引handleDisable(row, index) {  // 函数需要一个返回值,true为可选,false为不可选择  if (row.status === '未还款') {    return false  } else {    return true  }}

 

4、保存数据更新前选中的数据

通过reserve-selection和row-key搭配使用,可以设置保留数据更新前的选中值(分页刷新数据等)

           
             
              
              
              .  .  .
           // method// 表格数据处理,保存上一页选中的数据// 返回的参数是每一行的值,需要指定表格数据的唯一值,一般是idhandleReserve (row) {  return row.id}

 

5、其他的一些方法

// 清除选中的数据

this.$refs.checkTable.clearSelection()

// 切换所有行的选中状态

this.$refs.checkTable.toggleAllSelection()