elementUI 表格行高亮，切换分页保持选择状态

最新推荐文章于 2024-05-20 20:00:00 发布

Rain羽

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量353

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/rainylf/article/details/130527788

版权

 <el-table ref="dragTable" v-loading="listLoading" :data="tableData.rows" height="250" row-key="id" default-expand-all highlight-current-row @selection-change="handleSelectionChange" @row-click="clickRow">

  data() {
    return {
      listLoading: false,
      tableData: {
        pagination: {
          total: 0, // 总数
          pageNo: 1, // 第一页
          pageSize: 2 // 每页条数
        },
        rows: []
      },
      currentRow: {},
    }
  },

 /**
 * 列表当前行事件
  */
 clickRow(row) {
  	// 选中行和原选中数据是同一条，清除选中状态，查所有数据
   if (this.currentRow.id === row.id) {
     row = {}
     this.currentRow = {}
   } else {
     this.currentRow = JSON.parse(JSON.stringify(row))
   }
   this.$emit('selectTableId', row.id)
 },

 /**
 * 列表查询
 */
 queryEquipmentTableFn(id) {
    this.listLoading = true
    let params = {
      pagesIndex: this.tableData.pagination.pageNo,
      pagesSize: this.tableData.pagination.pageSize
    }
    this.$api.equipmentManage.queryTypeStatisticsList(params)
      .then(res => {
        if (res.statusCode === 200) {
          this.tableData = this.tools.pageToElTableData(res.data)
          // 切换分页时候保存高亮数据
          if (this.currentRow.id) {
            let index = this.tableData.rows.findIndex(item => item.id === this.currentRow.id)
            this.$refs.dragTable.setCurrentRow(this.tableData.rows[index])
          }
          this.listLoading = false
        } else {
          this.$message.error(res.errors)
          this.listLoading = false
        }
      })
  },