el-table 翻页后保留所勾选项

el-table 翻页后保留所勾选项

前言

在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。

思路

查找资料后可得

1. 为了实现保留的功能，所以需要存储勾选内容的数组（selectedItems）
2. 通过el-table中的toggleRowSelection方法，可以设置行的选中状态。
3. 通过el-table中的select和select-all获得勾选或者取消的内容

步骤

表格勾选

表格单选

因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减

select (selection, row) {
  if (selection && selection.find(item => item && (item.id == row.id))) {
    this.addRows([row])
  } else {
    this.deleteRows([row])
  }
}

表格全选

通过selection数组长度判断是选中还是取消

selectAll (selection) {
  if (selection.length > 0) {
    this.addRows(this.tableData)
  } else {
    this.deleteRows(this.tableData)
  }
},

编辑勾选数组

添加选中

添加时判断selectedItems中是否存在当前row数据，存在则直接return

addRows (rows) {
  rows.forEach(row => {
    if (this.selectedItems.find(item => item.id == row.id)) { return }
    this.selectedItems.push(row)
  });
},

取消选中

当selectedItems为空数组时，则直接 return

deleteRows (rows) {
  if (this.selectedItems.length == 0) { return }
  rows.forEach(row => {
    this.selectedItems = this.selectedItems.filter(item => item.id == row.id)
  })
}

设置选中状态

这里使用this.$nextTick是保证表格渲染完成之后，才添加选中效果。
selectedItem是筛选循环当前行row是否在当前表格tableData数据中。

rows.forEach(row => {
 this.$nextTick(() => {
    let selectedItem = this.tableData.find(item => item.id == row.id)
    this.$refs.multipleTable.toggleRowSelection(selectedItem);
  });
})

完整代码

<template>
  <div>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              :key="randomKey"
              style="width: 100%"
              @select="select"
              @select-all="selectAll">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="日期"
                       width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="id"
                       label="ID"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next,slot"
                   :current-page="pages.index"
                   @current-change="handleCurrentChange"
                   :total="pages.count"
                   :page-size="pages.size">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { date: '2016-05-03', name: '王小虎', id: '0' },
        { date: '2016-05-03', name: '王小虎', id: '1' },
        { date: '2016-05-03', name: '王小虎', id: '2' },
        { date: '2016-05-03', name: '王小虎', id: '3' },
        { date: '2016-05-03', name: '王小虎', id: '4' },
        { date: '2016-05-03', name: '王小虎', id: '5' },
        { date: '2016-05-03', name: '王小虎', id: '6' },
        { date: '2016-05-03', name: '王小虎', id: '7' },
        { date: '2016-05-03', name: '王小虎', id: '8' },
        { date: '2016-05-03', name: '王小虎', id: '9' },
        { date: '2016-05-03', name: '王小虎', id: '10' },
        { date: '2016-05-03', name: '王小虎', id: '11' },
        { date: '2016-05-03', name: '王小虎', id: '12' },
        { date: '2016-05-03', name: '王小虎', id: '13' },
        { date: '2016-05-03', name: '王小虎', id: '14' },
        { date: '2016-05-03', name: '王小虎', id: '15' },
        { date: '2016-05-03', name: '王小虎', id: '16' },
        { date: '2016-05-03', name: '王小虎', id: '17' },
        { date: '2016-05-03', name: '王小虎', id: '18' },
        { date: '2016-05-03', name: '王小虎', id: '19' },
        { date: '2016-05-03', name: '王小虎', id: '20' },
        { date: '2016-05-03', name: '王小虎', id: '21' },
        { date: '2016-05-03', name: '王小虎', id: '22' },
        { date: '2016-05-03', name: '王小虎', id: '23' },
        { date: '2016-05-03', name: '王小虎', id: '24' },
        { date: '2016-05-03', name: '王小虎', id: '25' },
        { date: '2016-05-03', name: '王小虎', id: '26' },
        { date: '2016-05-03', name: '王小虎', id: '27' },
        { date: '2016-05-03', name: '王小虎', id: '28' },
        { date: '2016-05-03', name: '王小虎', id: '29' },
        { date: '2016-05-03', name: '王小虎', id: '30' },
        { date: '2016-05-03', name: '王小虎', id: '31' },
        { date: '2016-05-03', name: '王小虎', id: '32' },
        { date: '2016-05-03', name: '王小虎', id: '33' },
        { date: '2016-05-03', name: '王小虎', id: '34' },
        { date: '2016-05-03', name: '王小虎', id: '35' },
        { date: '2016-05-03', name: '王小虎', id: '36' },
        { date: '2016-05-03', name: '王小虎', id: '37' },
        { date: '2016-05-03', name: '王小虎', id: '38' },
        { date: '2016-05-03', name: '王小虎', id: '39' },
      ],
      tableData: [],
      selectedItems: [],
      pages: { size: 10, index: 1, count: 50 },
      randomKey: Math.random(),
    }
  },
  mounted () {
    this.pages.count = this.items.length || 0
    this.setTabelData()
  },
  methods: {
    //设置页面数据
    setTabelData () {
      let { index, size } = this.pages
      this.tableData = this.items.slice((index - 1) * size, (index - 1) * size + size)
      //randomKey是table数据改动时，刷新table的
      this.randomKey = Math.random()
      this.selectedPreExisting(this.selectedItems)
    },
    //监听翻页
    handleCurrentChange (index) {
      this.pages.index = index
      this.setTabelData()
    },
    //选中table已有数据
    selectedPreExisting (rows) {
      if (rows.length > 0) {
        //这里使用this.$nextTick是防止表格未渲染完成就执行，导致无法添加选中效果
        this.$nextTick(() => {
          rows.forEach(row => {
            //判断row是存在当前tableData
            let selectedItem = this.tableData.find(item => item.id == row.id)
            this.$refs.multipleTable.toggleRowSelection(selectedItem);
          });
        })
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //表格单选
    select (selection, row) {
      //因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
      //这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减
      if (selection && selection.find(item => item && (item.id == row.id))) {
        this.addRows([row])
      } else {
        this.deleteRows([row])
      }
    },
    //表格全选
    selectAll (selection) {
      //判断是选中还是取消
      if (selection.length > 0) {
        this.addRows(this.tableData)
      } else {
        this.deleteRows(this.tableData)
      }
    },
    //添加选中
    addRows (rows) {
      rows.forEach(row => {
        //过滤，当selectedItems有此条数据时，则直接返回，不执行添加
        if (this.selectedItems.find(item => item.id == row.id)) { return }
        this.selectedItems.push(row)
      });
    },
    //取消选中
    deleteRows (rows) {
      //当selectedItems为空数组时，不执行删除
      if (this.selectedItems.length == 0) { return }
      rows.forEach(row => {
        this.selectedItems = this.selectedItems.filter(item => item.id == row.id)
      })
    }
  }
}
</script>