Небольшой трюк по использованию компонента Table в iview

внешний интерфейс Vue.js iView

слова, написанные впереди

Это первый раз, когда я публикую сообщение, мой младший брат не знает обучения и знаний.Все, пожалуйста, наступите на него осторожно.Если есть какая-либо ошибка, пожалуйста, обратитесь за советом к великим богам. Недавно я работал над проектом с семейством корзин iview+vue и столкнулся с некоторыми проблемами, вот мой небольшой опыт. Ладно, хватит нести чушь и сразу к теме

вопрос

Ниже приведен метод компонента Table для iview:

Я полагаю, что осторожные друзья обнаружат, что в режиме множественного выбора нет события «отменить все», так что мне делать, когда мне нужно управлять данными, когда я нажимаю «отменить все»?

Решать проблему

Это на самом деле очень просто, это дает нам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
        }
    }
}

Как насчет того, чтобы использовать один метод для решения требований, но если операция и требования сложны, этот метод не кажется подходящим, сложность данных операции будет выше, и легко ошибиться, друзья, которые свободны, могут попробуйте, если у вас есть лучшие методы и предложения, добро пожаловать в комментарии, я новичок, пожалуйста, поддержите меня...

Категории