The words written in the front

For the first time, my little brother is untalented and uneducated. Please step on it carefully. If there is any mistake, please kindly advise me. Recently, I met some problems during the project with iVIEW + Vue family barrel. Here are some of my experiences. Okay, let’s cut to the chase

The problem

Here is the iView Table component method:

To solve the problem

It gives us an on-selection-change event that returns a selection array of all selected data, so we can easily simulate the “deselect all” event using this event

cancelSelectAll(selection) {
        if(! Selection.length) {// here we can write our deselect all event logic}},Copy the code

The latter

There’s another way to play on-Selection -change

paging
Boxes,

The normal way of thinking would then be through the iView event method:

On-select Selects a method,

On-select-cancel Cancels a method,

On-select-all Click select all method,

And the simulated “deselect all” method I mentioned above

Throw data into the selectDataStore array

The following code is posted

html

<blockquote>
    <Button type="info" size="large" @click="back"> returns the previous step </Button> <Buttontype="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>
Copy the code

js

export default:{
    data() {
        returnEpage (val) {selectDataStore:[] // create a data repository currentPage:1}}, methods:{changePage (val) { Return to change the page number after this. CurrentPage = val}, selectItem (selection, row) {this. SelectDataStore. Push (row)}, cancelItem (selection, row) { this.selectDataStore.forEach((item, index) => {if(item.regNo === row.regNo) {// regNo is unique in my data, So for this judgment conditions. 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 is all the data}}}Copy the code

If the requirement is simple, an on-selection-change event will do the trick:

export default{
     data() {
        return{selectDataStore:[] // create a data store dataStoreTo:[] // create an intermediate data store currentPage:1 // table page number}}, Epage methods:{changePage (val) { This.currentpage = val}, selectChange(selection) {// since this event always returns all the data selected by the user on the currentPage, we can create an object to record the data selected by the user on each pageletPageDataStore = {page: this.currentPage, // dataArr: } this.currentPage-1 = pageDataStore} this.currentPage-1 = pageDataStoredetermine() { this.selectDataStore = [] this.dataStoreTo.forEach((item, index) => { this.selectDataStore = this.selectDataStore.concat(this.dataStoreTo[index].dataArr) }) This.selectdatastore}}}Copy the code

How, in a way solves the demand, but if the operation complex and needs, this method don’t feel very fit, operating data complexity will be higher, but also very easy to get wrong, free friends can have a try, if you have any better methods and Suggestions, welcome comments, I am a rookie, forgive me ha…