2021-11-05

实现iview UI框架table 分页翻页保留选项。


如图显示,这是个弹窗

<Modal v-model="modal12" @on-ok="ok" title="选择体">

      <div class="sousuo"><Input v-model="value1" :readonly="false" placeholder="" style="width: 300px"/><Button type="default" @click="chaxun_one(1)">搜</Button></div>


      <!--表单-->

      <Table stripe ref="selection" :columns="columns2" :data="data2"  

        @on-select="onSelect"

        @on-select-cancel="onSelectCancel"

        @on-select-all="onSelectAll"

        @on-select-all-cancel="onSelectAllCancel"

        ></Table>

      <!--分页-->

      <Page show-total :total="zongtiaoshu" :page-size="pageSize"  @on-change="qiehuanpage"/>

    </Modal>





   onSelect(selection,row){


      this.tempArr.push(row.id)

      this.data11.push(row.name)

      this.data2.forEach(item =>{

        if(item.id === row.id){

          item['_checked'] = true

        }

      })


    },

    onSelectCancel(selection,row){

      this.tempArr.forEach((item,index) =>{

        if(row.id === item){

          this.tempArr.splice(index,1)

        }

      })

      this.data11.forEach((item,index) =>{

        if(row.name === item){

          this.data11.splice(index,1)

        }

      })


    },

    onSelectAll(selection){


      selection.forEach(item =>{

        item['_checked'] = true

        this.tempArr.push(item.id)

        this.data11.push(item.name)

      })

    },

    onSelectAllCancel(selection){

      this.data2.forEach((e,index) =>{

        this.tempArr.forEach((item,index) =>{

          if(e.id === item){

            this.tempArr.splice(index,1)

          }

        })

        this.data11.forEach((item,index) =>{

          if(e.name === item){

            this.data11.splice(index,1)

          }

        })

      })




    },

    handleTableChecked(datas){

      this.tempArr.forEach(item =>{

        datas.forEach(e =>{

          if(item === e.id){

            e['_checked'] = true

          }

        })

      })

    }

附上我的代码,代码应该不用解释了,对你们有用的话,记得点个赞!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容