关于使用iview中Table组件的一点小技巧

写在前面的话

第一次发文，小弟才疏学浅，各位看官，当心轻踩，若有错误，还请大神们指教一二。 最近在用iview+vue全家桶作项目，期间遇到了一些问题，下面是个人一点点心得。OK，废话少说，直接进入正题

问题

下面是iview的Table组件方法：

相信细心的朋友们会发现，在多选模式下，居然没有“取消全选”的事件，因此当我有点击“取消全选”时去操做数据的需求时怎么办？

解决问题

其实很简单，它给到咱们一个on-selection-change事件,这个事件会返回全部已选数据selection数组，那么咱们利用这个事件能够很方便的模拟出“取消全选”事件

cancelSelectAll(selection) {
        if (!selection.length) {
          //这里就能够写咱们的取消全选事件逻辑了
        }
      },
复制代码

后话

其实on-selection-change事件还能够这样玩

若是你有个这样的需求：用户经过 分页和 多选框任意操做去选择数据，最后点击“确认”按钮弹出用户所选全部数据。

这时正常的思路通常会而后经过iview的事件方法:

on-select选中某一项方法,

on-select-cancel取消某一项方法,

on-select-all点击全选方法,

还有我上面提到的模拟"取消全选"方法

去往selectDataStore数组里扔数据

下面贴代码

html

<blockquote>
    <Button type="info" size="large" @click="back">返回上一步</Button>
    <Button type="success" size="large" class="bth" @click="determine">肯定</Button>
</blockquote>
<div style="overflow: hidden">
    <Table border
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-select="selectItem"
        @on-select-cancel="cancelItem"
        @on-select-all="selectItemAll"
        @on-selection-change="selectChange"></Table>
    <div style="float: right;margin:1% 0">
        <Page :total="total" show-total @on-change="changePage"></Page>
    </div>
</div>
复制代码

js

export default:{
    data() {
        return {
            selectDataStore:[]  //建一个数据仓库
            currentPage:1
        }
    },
    methods:{
        changePage (val) {        //翻页事件，返回改变后的页码
            this.currentPage = val
        },
        selectItem(selection, row) {
            this.selectDataStore.push(row)    
        },
        cancelItem(selection, row) {
            this.selectDataStore.forEach((item, index) => {
            if (item.regNo === row.regNo) {      //这里我数据中regNo是惟一的，因此拿来作判断条件
                this.selectDataStore.splice(index, 1)
            }
        })
      },
      selectItemAll(selection) {
        this.selectDataStore = this.selectDataStore.concat(selection)
      },
      selectChange(selection) {
        if (!selection.length) {
          let arr1 = this.selectDataStore
          let arr2 = this.data
          for (let i = 0; i < arr1.length; i++) {
            for (let j = 0; j < arr2.length; j++) {
              if (arr1[i].regNo === arr2[j].regNo) {
                this.selectDataStore.splice(i, 1)
              }
            }
          }
        }
      },
      determine() {
          //这时this.selectDataStore已是拿到的所有数据
      }
    }
}
复制代码

其实若是需求简单，这里一个on-selection-change事件就能够搞定:

export default{
     data() {
        return {
            selectDataStore:[]  //建一个数据仓库
            dataStoreTo:[]   //创建一个中间数据仓库
            currentPage:1   //表格页数
        }
    },
    methods:{
        changePage (val) {        //翻页事件，返回改变后的页码
            this.currentPage = val
         },
        selectChange(selection) {   //由于此事件总会返回当前页(有分页操做时)用户所选全部数据,利用这个特色咱们就能够创建一个对象去记录每页用户所选数据
             let pageDataStore = {    
              page: this.currentPage,   //当前操做页数
              dataArr: selection       //当前操做页用户选择的数据
            }
            this.dataStoreTo[this.currentPage - 1] = pageDataStore    //丢给中间数据仓库(记录下位置，用以解决数据覆盖问题)
        },
        determine() {
            this.selectDataStore = []
            this.dataStoreTo.forEach((item, index) => {
              this.selectDataStore = this.selectDataStore.concat(this.dataStoreTo[index].dataArr)
            })    //这样也拿到了用户所选所有数据this.selectDataStore
        }
    }
}
复制代码

怎么样，用一个方法就解决了需求，不过若是操做和需求复杂的话，这个方法就感受不太适合了，操做的数据复杂度会更高，并且还很容易出错，有空的朋友能够试试，若是你们有什么更好的方法和建议，欢迎评论，本人菜鸟一枚，多多包涵哈···