Iview表格点击下一页获取复选框的值以及复选框选中后的回显

最新推荐文章于 2023-05-06 16:45:19 发布

路遇春风

最新推荐文章于 2023-05-06 16:45:19 发布

阅读量1.7k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44046781/article/details/108999532

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用iView UI库中的表格组件来管理选中状态，包括添加自定义事件、维护选中项列表及实现翻页时的状态回显等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <Table
            :columns="columns"
            :data="list"
            ref="purchaseTable"
            @on-selection-change="selectTable"
            @on-select-cancel="selectCancel"
          />

添加两个事件参考iview官方文档https://www.iviewui.com/components/table
在这里插入图片描述

 selectTable(arr) {
      arr.forEach((item) => {
        if (!this.selectEmploy.includes(item.id)) {
          this.selectEmploy.push(item.id);
        }      
      });
    },

维护一个数组 selectEmpoyee 用于存放checked选中后的表格数据确保id的唯一性

selectCancel(selection, row) {
      this.selectEmploy = this.selectEmploy.filter((item) => {
        return item != row.id;
      });
    },

多选情况下点击取消时会触发该方法接受两个参数第一个为选中项第二个为取消项
将取消项的id移除即可方法有很多

回显

async pageChange(val) {
      let result = await saffAPI.queryEmpPositionPage({
        currPage: val,
        pageSize: 20,
        model: {
          ...this.form,
          companyType: this.companyType,
          companyId: this.companyId,
          roleId: this.id,
          excludeRole: this.type == "add",
          orgIds: this.selectdArr,
        },
      });
      //回显
      this.selectEmploy.forEach(item=>{
        result.records.forEach(element=>{
          if(element.id==item){
            this.$set(element,'_checked',true)
          }
        })
      })
      this.list = result.records;
      this.queryPage.total = result.total;
    },