vue+iview Table表格多选切换分页保持勾选状态

本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下

第一种情况(配合后端做选中数据处理)

定义三个参数,是否为全选(isSelectAll)、不是全选时选择的数据(selectObject: [])、反选数据(unSelectObject:[])

HTML


                          已选择
              {{ total-unSelectObject.length }} 项
              {{ selectObject.length }} 项
              清空
              
                
              
              
                
              
            
            
            
                         

data

data: [],
isSelectAll: false,
condition: '',
selectObject: [],
unSelectObject: [],
selectEquipsIds: '0',

JS

// 全选
onSelectAll() {
this.isSelectAll = true
this.getDataList()
    },
    //取消全选
    selectAllcancel() {
      this.isSelectAll = false
      this.selectEquipsIds = '0'
      this.getDataList()
    },
    //全选当前页
    selectAll() {
      if (this.isSelectAll) {
        for (let i = this.data.length - 1; i >= 0; i--) {
          var _index = this.unSelectObject.indexOf(this.data[i].id)
          if (_index != -1) {
            this.unSelectObject.splice(_index, 1)
          }
        }
        console.log(this.unSelectObject)
      } else {
        for (let i = this.data.length - 1; i >= 0; i--) {
          this.selectObject.push(this.data[i].id)
        }
        console.log(this.selectObject)
      }
    },
    // 取消当前页
    cancelAll() {
      if (this.isSelectAll) {
        for (let i = this.data.length - 1; i >= 0; i--) {
          this.unSelectObject.push(this.data[i].id)
        }
         console.log(this.unSelectObject)
      } else {
        for (let i = this.data.length - 1; i >= 0; i--) {
          var _index = this.selectObject.indexOf(this.data[i].id)
          if (_index != -1) {
            this.selectObject.splice(_index, 1)
          }
        }
        console.log(this.selectObject)
      }
    },
    // 选中一行
    TableSelectRow(selection, row) {
      if (this.isSelectAll) {
        var _index = this.unSelectObject.indexOf(row.id)
        if (_index != -1) {
          this.unSelectObject.splice(_index, 1)
          console.log(this.unSelectObject)
        }
      } else {
        if (!this.selectObject.includes(row.id)) {
          this.selectObject.push(row.id)
          console.log(this.selectObject)
        }
      }
    },
    // 取消选中一行
    TableSelectCancelRow(selection, row) {
      if (this.isSelectAll) {
        this.unSelectObject.push(row.id)
      } else {
        var _index = this.selectObject.indexOf(row.id)
        if (_index != -1) {
          this.selectObject.splice(_index, 1)
          console.log(this.selectObject)
        }
      }
    },
    // 判断是否选中
    sortData() {
      if (this.isSelectAll) {
        for (let i = this.data.length - 1; i >= 0; i--) {
          if (!this.unSelectObject.includes(this.data[i].id)) {
            this.data[i]._checked = true
          }
        }
      } else {
        if (this.selectObject.length) {
          this.data.forEach((ele) => {
            if (this.selectObject.includes(ele.id)) ele._checked = true
          })
        }
      }
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true
      api().then((res) => {
        this.loading = false
        if (res.success) {
          this.data = res.result?.records
          this.sortData()  //分页时保留选中状态
          if (this.data.length == 0 && this.searchForm.pageIndex > 1) {
            this.searchForm.pageIndex -= 1
            this.getDataList()
          }
        }
      })
},

实现效果

全选效果

vue+iview Table表格多选切换分页保持勾选状态_第1张图片

vue+iview Table表格多选切换分页保持勾选状态_第2张图片

vue+iview Table表格多选切换分页保持勾选状态_第3张图片

单独选择效果

vue+iview Table表格多选切换分页保持勾选状态_第4张图片

vue+iview Table表格多选切换分页保持勾选状态_第5张图片

整页全选选择效果

vue+iview Table表格多选切换分页保持勾选状态_第6张图片

vue+iview Table表格多选切换分页保持勾选状态_第7张图片

整页全选+单选

vue+iview Table表格多选切换分页保持勾选状态_第8张图片

vue+iview Table表格多选切换分页保持勾选状态_第9张图片

第二种情况(只给后端传需要传的数据)

定义一个参数,已选数据(selectObject:[])

HTML

                                              

data

data: [],
selectObject: [],

JS

//判断是否选中 
sortData() {
        if (this.selectEquipsIds.length) {
                    this.tableList.forEach(ele => {
                        if (this.selectEquipsIds.includes(ele.id)) ele._checked = true;
                    })
                }
            },
            // 选中一行
            TableSelectRow(selection, row) {
                if (!this.selectEquipsIds.includes(row.id)) {
                    this.selectEquipsIds.push(row.id);
                     
                }
            },
            // 取消选中一行
            TableSelectCancelRow(selection, row) {
                var _index = this.selectEquipsIds.indexOf(row.id);
                if (_index != -1) {
                    this.selectEquipsIds.splice(_index, 1);
                     
                }
            },
            // 选中所有
            selectAll() {
                for (let i = this.tableList.length - 1; i >= 0; i--) {
                    this.TableSelectRow(null, this.tableList[i]);
                }
            },
            // 取消选中所有
            cancelAll() {
                for (let i = this.tableList.length - 1; i >= 0; i--) {
                    this.TableSelectCancelRow(null, this.tableList[i]);
                }
            },
            // 翻页查询
            onChange(param) {
                this.page.PageIndex = param;
                this.getDataList();
            },
            // 选择分页数
            onPageSizeChange(param) {
                this.page.PageSize = param;
                this.getDataList();
            },
            // 查询表格数据 
            getDataList() {
              // 多条件搜索用户列表
              this.loading = true
              api().then((res) => {
                this.loading = false
                if (res.success) {
                  this.data = res.result?.records
                  this.sortData()
                  // this.total = res.result.total
                  if (this.data.length == 0 && this.searchForm.pageIndex > 1) {
                    this.searchForm.pageIndex -= 1
                    this.getDataList()
                  }
                }
              })
            },
},

以上均已实测可用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue+iview Table表格多选切换分页保持勾选状态)