zoukankan      html  css  js  c++  java
  • Element table 翻页多选

    需求: 列表页面导出excel数据,需要支持多页导出

    思路如下:

    1 所有选中的数据存到一个数组中  selectDataArrL

    2 切换 currentPage(页码) 或 pageSize(条数) 的时候 给当前数据添加选中状态  this.$refs.multipleTable.toggleRowSelection()

    3 整理需要导出的数据

    实现步骤:

    1. 存储选中的内容

    <el-table :data="list" border stripe highlight-current-row
    @select-all="selectAll" // 全选
    height="480px"
    @select="selectChange" // 单选
    ref="multipleTable"
    style=" 100%;">
    <el-table-column
    type="selection"
    width="55">
    </el-table-column>
    <el-table-column v-for="item in tableHeadData" :label="item.name" :width="item.width" v-if="item.isShow">
    <template slot-scope="scope">
    <span>{{scope.row[item.value]}}</span>
    </template>
    </el-table-column>
    </el-table>

    // 单独选择
    selectChange (arr,row) {
      // 判断选中数据中是否包含当前的row
      let isHaveItem = this.selectDataArrL.find(item => item.id== row.id)
      if (isHaveItem) {
        this.selectDataArrL = this.selectDataArrL.filter(item => item.id != isHaveItem.id)
      } else {
        this.selectDataArrL.push(row)
      }

    },

    // 全选
    selectAll (arr) {
      // 判断全选选中数据是否为空
    if (arr.length > 0) {
    this.selectDataArrL = this.selectDataArrL.concat(arr)
    } else {
        arr.forEach(ms => {
          this.selectDataArrL = this.selectDataArrL.filter(item => item.id!= ms.id)
        })
        }
    },


    2. 实现选中内容打勾✔状态;切换页码或者条数重新请求数据
    let data = {
    currentPage: this.currentPage,
    pageSize: this.pageSize,
    }
    axios.post(url, data).then((response) => {
      // this.list 是返回当前页的数据
      this.list = response.data.data.records
      // this.totalSize = response.data.data.total
       if (this.selectDataArrL.length > 0) {
        this.$nextTick(function () {
          this.selectDataArrL.forEach(item => {
            this.list.forEach(listitem => {
              if (item.id == listitem.id) {
                this.$refs.multipleTable.toggleRowSelection(listitem, true)
              }
            })
          })
        })
       }
    })


    3. 导出数据整理
    let ids = []
    vm.selectDataArrL.forEach(item => {
      // 如果页面中先单选3条数据,后全选10条数据,就会存起来13条数据;取消全选会全部取消13条
    // 导出数据整理,通过判断去除重复数据
    if (ids.indexOf(item.id) < 0) {
    ids.push(item.id)
    }
    })


  • 相关阅读:
    进制
    流程控制
    运算符
    格式化输出
    数据结构-树的遍历
    A1004 Counting Leaves (30分)
    A1106 Lowest Price in Supply Chain (25分)
    A1094 The Largest Generation (25分)
    A1090 Highest Price in Supply Chain (25分)
    A1079 Total Sales of Supply Chain (25分)
  • 原文地址:https://www.cnblogs.com/guozongzhang/p/10653320.html
Copyright © 2011-2022 走看看