• 基于eltable,实现一个简单分页多选功能


    分页时,仍然保留勾选的数据和选中的状态。

    实现思路:利用对象属性不可重复的特性

    代码如下:

    <template>
      <div>
        <el-table
          ref="table"
          :data="tableData"
          size="small"
          height="100%"
          @selection-change="handleSelectChange"
          @select="handleSelect"
        >
          <el-table-column width="50" type="selection" />
          <el-table-column type="index" label="序号" width="50">
            <template scope="scope">
              <span>{{
                (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称1" />
          <el-table-column label="名称2" />
          <el-table-column label="名称3" />
          <el-table-column label="名称4" />
          <el-table-column label="名称5" />
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          tableData: [],
          selectedObj: {},
          selectedData: []
        }
      },
      methods: {
        getList() {
          // 查数据的地方,处理分页选中状态
          this.handleRowSelection(this.tableData)
        },
        handleSelectChange(selection) {
          // 全选取消,删除当前页所有数据
          if (selection.length === 0) {
            this.tableData.forEach(item => {
              delete this.selectedObj[item.id]
            })
          }
          // 勾选数据 添加
          selection.forEach(item => {
            this.selectedObj[item.id] = item
          })
          // 获取所有分页勾选的数据
          this.selectedData = []
          for (const key in this.selectedObj) {
            this.selectedData.push(this.selectedObj[key])
          }
        },
        handleSelect(selection, row) {
          // 取消单个勾选时,删除对应属性
          if (!selection.some(item => item.id === row.id)) {
            delete this.selectedObj[row.id]
          }
        },
        // 处理当前列表选中状态
        handleRowSelection(data) {
          data.forEach(item => {
            if (this.selectedObj[item.id]) {
              this.$nextTick(() => {
                this.$refs.table.toggleRowSelection(item)
              })
            }
          })
        }
      }
    }
    </script>
  • 相关阅读:
    CSS(二)样式优先级别和css的单位刻度
    Ural 1416 Confidential
    UVA 10600
    UESTC 1558 Charitable Exchange
    ZOJ 3349 Special Subsequence
    mysql主从复制
    debian安装mysql
    lpeg
    多线程程序 怎样查看每个线程的cpu占用
    linux TIME_WAIT过多的解决方法
  • 原文地址:https://www.cnblogs.com/scallop/p/15625196.html
Copyright © 2020-2023  润新知