關於使用iview中Table元件的一點小技巧

Spdino發表於2019-03-04
View元件

寫在前面的話

第一次發文，小弟才疏學淺，各位看官，小心輕踩，如有錯誤，還請大神們指教一二。
最近在用iview+vue全家桶做專案，期間遇到了一些問題，下面是我的一點點心得。OK，廢話少說，直接進入正題

問題

下面是iview的Table元件方法：

關於使用iview中Table元件的一點小技巧

相信細心的朋友們會發現，在多選模式下，竟然沒有“取消全選”的事件，所以當我有點選“取消全選”時去運算元據的需求時怎麼辦？

解決問題

其實很簡單，它給到我們一個on-selection-change事件,這個事件會返回所有已選資料selection陣列，那麼我們利用這個事件可以很方便的模擬出“取消全選”事件

cancelSelectAll(selection) {
        if (!selection.length) {
          //這裡就可以寫我們的取消全選事件邏輯了
        }
      },
複製程式碼

後話

其實on-selection-change事件還可以這樣玩

關於使用iview中Table元件的一點小技巧

如果你有個這樣的需求：使用者通過分頁和多選框任意操作去選擇資料，最後點選“確認”按鈕彈出使用者所選所有資料。

這時正常的思路一般會然後通過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
        }
    }
}
複製程式碼

怎麼樣，用一個方法就解決了需求，不過如果操作和需求複雜的話，這個方法就感覺不太適合了，操作的資料複雜度會更高，而且還很容易出錯，有空的朋友可以試試，如果大家有什麼更好的方法和建議，歡迎評論，本人菜鳥一枚，多多包涵哈···

相關文章