关于使用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
        }
    }
}
复制代码

怎么样，用一个方法就解决了需求，不过如果操作和需求复杂的话，这个方法就感觉不太适合了，操作的数据复杂度会更高，而且还很容易出错，有空的朋友可以试试，如果大家有什么更好的方法和建议，欢迎评论，本人菜鸟一枚，多多包涵哈···