關於使用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
        }
    }
}
複製代碼

怎麼樣，用一個方法就解決了需求，不過若是操做和需求複雜的話，這個方法就感受不太適合了，操做的數據複雜度會更高，並且還很容易出錯，有空的朋友能夠試試，若是你們有什麼更好的方法和建議，歡迎評論，本人菜鳥一枚，多多包涵哈···