elementUI table 获取已勾选的行的数据

前言：对列表项进行批量操作时，实现类似下图的效果，有两种方法

方法一：主要用到el-table的selection-change事件函数

优点：简单
缺点：如果存在分页，进入别的分页，selection清空
html

<el-table  size="mini" :v-loading="loading.table" :data="listResult" :row-key="getRowkey"  @selection-change="selectL" ref="multipleTable"  align="center" max-height="200" >

js

// 选中添加/不选中删除
selectL (selection, row) {
  this.listSelect = selection;
  this.listSelectId = selection.map(item => item.id)
},

方法二：主要用到el-table的select和select-all事件函数

• 优点：切页后，被选项依然存在，即支持切页保留被选项，被选项回显
  支持切页搜索
• 知识点：

1. 定义selectAllCheck:0,//奇选偶非选判定当前列表数据项是否为全选状态
2. toggleRowSelection()：设置待选列表的数据项的默认选中，需要页面渲染完毕之后才有效，因此需要放在this.$nextTick中
3. 判断selection/this.listResult中的数据项是否在已选列表listSelect中时，直接用数据项itemif(this.listSelect.indexOf(item) === -1)无效，通过idif(this.listSelectId.indexOf(item.id) === -1)判断有效（不知道为什么）

• 代码

<el-table  size="mini" :v-loading="loading.table" :data="listResult" @select="selectL" @select-all="selectAll" ref="multipleTable"  align="center" max-height="200" >

data(){
  return{
      listResult: [],
      listSelect: [],
      listSelectId: [],
      loading1: {
        table: true
      },
      pageInfoResult: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      selectAllCheck:1,//奇非全偶已全
    }
}

// 查询选择列表
fetchSelectAssets() {
  this.loading1.table = true
  this.search = Object.assign({}, this.pageInfoResult)
  listAssetinfo(this.search).then(res => {
      this.listResult = res.rows
      // 设置listSelect中存在的数据项默认选中
      this.$nextTick( ()=> {
        this.listResult.forEach(item => {
          if(this.listSelectId.indexOf(item.id)!=-1){
            this.selectAllCheck = 2
            this.$refs.multipleTable.toggleRowSelection(item);
          }
          else{
            this.selectAllCheck = 1
          }
        })
      })
      this.pageInfoResult.total = res.total
      this.loading1.table = false
  })
},
// 选中添加/不选中删除---点击全选
// 选中添加/不选中删除---点击全选
selectAll (selection) {
  if(this.selectAllCheck%2){
    console.log(this.selectAllCheck, this.selectAllCheck%2,'未全选')
    selection.forEach((item, index) => {
      if(this.listSelectId.indexOf(item.id) === -1){
        this.listSelect.push(item)
        this.listSelectId.push(item.id)
      }
    })
  }else {
    console.log(this.selectAllCheck, this.selectAllCheck%2,'已全选')
    this.listResult.forEach((item, index) => {
      const i = this.listSelectId.indexOf(item.id)
      if(i !== -1){
        this.listSelect.splice(i, 1)
        this.listSelectId.splice(i,1)
      }
    })
  }
  this.selectAllCheck++
},
// 选中添加/不选中删除---点击行
selectL (selection, row) {
  if (event.target.checked) {
    this.listSelect.push(row)
    this.listSelectId.push(row.id)
    if(selection.length == this.listResult.length){  //判断是否当前页面的数据项是否已全部被选中
      this.selectAllCheck = 2
    }
  } else {
    this.selectAllCheck = 1//当前页面的数据项已经不是全部被选中
    for (let i in this.listSelectId) {
      if (row.id === this.listSelectId[i]) {
        this.listSelect.splice(i, 1)
        this.listSelectId.splice(i, 1)
      }
    }
  }
},

• 效果

1. 点击添加和全选添加
2. 切页保存已选项和切页回显