element-ui之el-table翻页后仍然记忆所选项

image.png

翻页后选择

 

image.png

 

再返回第一页

 

image.png

查询后仍然记忆所选

image.png

组件代码

 

<template>
  <div>
    <searchBox>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="厨道名称">
              <el-input v-model="queryForm.kitchenName" @keyup.enter.native="query(1)" placeholder="请输入" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厨道编号">
              <el-input v-model="queryForm.kitchenCode" @keyup.enter.native="query(1)" placeholder="请输入" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button-group slot="button">
        <el-button type="primary" size="medium" icon="el-icon-search" @click="query(1)">查询</el-button>
        <el-button type="" size="medium" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-button-group>
    </searchBox>
    <!-- 厨道列表 -->
    <el-table @select="select" @select-all="selectAll" :max-height="maxheight" border ref="dataTable" v-loading="tableLoading" :element-loading-text="loadingText" :data="tableData" style="width: 100%" size="mini">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="厨道名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="厨道编号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenStatus | kitchenStatus}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-pag">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[20, 50, 100]" :page-size="queryForm.size" layout="total, sizes, ->, prev, pager, next" :total="total">
      </el-pagination>
      <!--prev-text="上一页" next-text="下一页" -->
    </div>
  </div>
</template>
<script>
import kitchenApi from '@/API/item/kitchen'
export default {
  props: {
    taskData: Object,
    /*
      *从父组件传过来的值，最后也在父组件进行最后提交, 是这个样子：{ kitchen: [] }
      */
    brandCode: String
  },
  data() {
    return {
      queryForm: {
        page: 0,
        size: 20
      },
      total: 0,
      page: 1,
      tableData: [],
      selectedRow: [],
      tableLoading: false,
      loadingText: '数据正在加载中请稍后...',
      maxheight: document.documentElement.clientHeight - 240
    }
  },
  created() {
    this.query(1)
  },
  methods: {
    // 查询厨道
    query(page) {
      this.tableLoading = true
      this.queryForm.page = page - 1
      this.queryForm.brandCode = this.brandCode
      kitchenApi
        .query(this.queryForm)
        .then(res => {
          this.tableData = res.content
          if (this.taskData.kitchen.length) {
            this.toggleSelection(this.taskData.kitchen)
          }
          this.tableLoading = false
          this.total = res.totalElements
        })
        .catch(err => {
          console.log(err)
          this.tableLoading = false
        })
    },
    // 选中table已有数据
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$nextTick(() => {
            var checked = this.tableData.find(
              tableRow => tableRow.kitchenCode === row.kitchenCode
            )
            this.$refs.dataTable.toggleRowSelection(checked)
          })
        })
      } else {
        this.$refs.dataTable.clearSelection()
      }
    },
    // 表格单选事件
    select(selection, row) {
      /* 此处有一个神奇的bug，
       * 因为翻页点选后selection会出现为undefined的元素，
       * 我对他进行了筛除，
       * 但愿日后有人见到这段代码可以给出更为优秀的解决方式
       */
      let allRows = selection.filter(item => !!item)
      // 根据表格单选事件确定取消是取消了哪一行
      if (allRows.find(item => item.kitchenCode === row.kitchenCode)) {
        // 选中新增一行
        this.addRows([row])
      } else {
        // 取消删除一行
        this.removeRows([row])
      }
      console.log(this.taskData.kitchen)
    },
    // 表格全选事件
    selectAll(selection) {
      // 如果有则是全选否则就是全取消
      alert(selection.length > 1)
      if (selection.length > 1) {
        this.addRows(this.tableData)
      } else {
        this.removeRows(this.tableData)
      }
      console.log(this.taskData.kitchen)
    },
    // 添加选中行
    addRows(rows) {
      for (let key of rows) {
        // 如果选中的数据中没有这条就添加进去
        if (
          !this.taskData.kitchen.find(
            item => item.kitchenCode === key.kitchenCode
          )
        ) {
          this.taskData.kitchen.push(key)
        }
      }
    },
    // 取消选中行
    removeRows(rows) {
      if (this.taskData.kitchen.length > 0) {
        for (let row of rows) {
          this.taskData.kitchen = this.taskData.kitchen.filter(item => item.kitchenCode !== row.kitchenCode)
        }
      }
    },
    // 选择单页展示多少条
    handleSizeChange(val) {
      this.queryForm.size = val
      this.tableLoading = true
      this.query(this.page)
    },
    // 选择展示第几页
    handleCurrentChange(val) {
      this.page = val
      this.tableLoading = true
      this.query(val)
    },
    // 重置
    reset() {
      this.queryForm.page = 1
      this.queryForm.size = 20
      this.queryForm.kitchenName = null
      this.queryForm.kitchenCode = null
      this.taskData.kitchen = []
      this.query(1)
    }
  }
}
</script>

作者：Z_D_殿峰
链接：https://www.jianshu.com/p/cb836bf5bbf9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。