elementUI实现el-table分页多选功能，解决点击分页之后还可以选中

Posted 2023-05-19 zcm1688

<template>
  <div>
    <el-dialog
      title="批量下载推广码"
      :visible.sync="dialogVisibleDownCodeAll"
      width="900px"
      :before-close="close"
    >
      <div class="container">
        <el-form size="small">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item>
                <el-input
                  v-model="userFrom.keyword"
                  @keyup.enter.native="onChanges"
                  placeholder="请输入姓名、电话、UID"
                  class="selWidth"
                  size="small"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    class="el-button-solt"
                    size="small"
                    @click="onChanges"
                  />
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template>
        <el-checkbox
          v-model="allcheckUser"
          label="全选"
          border
          style="margin-bottom: 20px;"
        ></el-checkbox>
        <el-table
          :key="tableKey1"
          :data="userData.data"
          :selection="userSelection"
          row-key="uid"
          @selection-change="handleSelectionChangeUser"
          style="width: 100%"
          size="mini"
          class="table"
          highlight-current-row
          ref="table1"
          v-loading="loading"
          :element-loading-text="`正在下载中:`+percentage + \'%\'"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column type="selection" > </el-table-column>
          <el-table-column label="ID" min- prop="uid" />
          <el-table-column label="用户姓名" min- prop="real_name" />
          <el-table-column label="用户昵称" min- prop="nickname" />
          <el-table-column label="用户电话" min- prop="phone" />
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[10, 20]"
            :page-size="userFrom.limit"
            :current-page="userFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userData.total"
            @size-change="handleSizeChangeUser"
            @current-change="pageChangeUser"
          />
        </div>
      </template>
      <span v-if="!loading" slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="next"
          >下 载</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

import  getToken  from "@/utils/auth";

import 
  promoterListApi
 from "@/api/promoter";

export default 
  name: "DownCode",
  props: ,
  data() 
    return 
      newAllArray: [],
      newAllArrayCheck: [],
      myHeaders:  "X-Token": getToken() ,
      tableKey1: 0,
      allcheckUser: false,
      dialogVisibleDownCodeAll: false,
      selection: [],
      userSelection: [],
      userData: 
        data: [],
        total: 0
      ,
      userFrom: 
        page: 1,
        limit: 10,
        keyword: ""
      ,
      page: 2,
      percentage: 0,
      loading: false
    ;
  ,
  watch: ,
  methods: 
    next() 
      const newArray = [].concat(...Object.values(this.newAllArray));
      newArray.filter(item => item !== undefined);
      if (newArray.length == 0 && !this.allcheckUser) 
        this.$message.error("请先选择分销员");
        return;
      
      this.down(1);
    ,
    down(page) 
      this.loading = true;
      const newArray = [].concat(...Object.values(this.newAllArray));
      newArray.filter(item => item !== undefined);
      var uid_Array = newArray.map(function(obj) 
        return obj.uid;
      );
      axios(
        url:
          process.env.VUE_APP_BASE_API +
          "/mer/user/promoter/code/batch_download",
        method: "POST",
        data: 
          uid: this.allcheckUser ? "-1" : uid_Array.join(","),
          page: page
        ,
        responseType: "json",
        headers: 
          "X-Token": getToken()
        
      ).then(response => 
        this.percentage = response.data.progress;
        if (response.data.url == "") 
          this.down(this.page++);
         else if (response.data.status == 400) 
          this.loading = false;
          this.$message.error(response.data.message);
         else 
          this.loading = false;
          window.open(response.data.url);
        
      );
    ,
    close() 
      this.dialogVisibleDownCodeAll = false;
    ,
    open() 
      this.dialogVisibleDownCodeAll = true;
    ,
    onChanges() 
      this.getListUser(1);
    ,
    // 分销员列表
    getListUser(num) 
      this.userFrom.page = num ? num : this.userFrom.page;
      promoterListApi( ...this.userFrom )
        .then(res => 
          this.userData.data = res.data.list;
          this.userData.total = res.data.count;

          this.newAllArrayCheck = [...this.newAllArray];
          const newArray = [].concat(...Object.values(this.newAllArrayCheck));
          newArray.filter(item => item !== undefined);

          // 赋值选中的数据
          // 赋值选中缓存的数据
          const selectedRow = newArray;
          this.$nextTick(() => 
            if (selectedRow) 
              const table = this.$refs.table1;
              selectedRow.forEach(row => 
                if (row != undefined) 
                  const selectedRowIndex = this.userData.data.findIndex(
                    item => item["uid"] === row["uid"]
                  );
                  if (selectedRowIndex > -1) 
                    table.toggleRowSelection(
                      this.userData.data[selectedRowIndex],
                      true
                    );
                  
                
              );
            
          );
        )
        .catch(res => 
          this.$message.error(res.message);
        );
    ,
    handleSizeChangeUser(val) 
      this.userFrom.limit = val;
      this.getListUser();
    ,
    pageChangeUser(page) 
      this.userFrom.page = page;
      this.getListUser();
    ,
    handleSelectionChangeUser(val) 
      // 判断选中行数据的变化
      this.userSelection = val;
      if (this.newAllArray[this.userFrom.page] == undefined) 
        this.newAllArray[this.userFrom.page] = [...val];
       else 
        this.newAllArray[this.userFrom.page] = [...val] || [
          ...this.newAllArray[this.userFrom.page],
          ...val
        ];
      
    
  
;
</script>

<style scoped lang="scss"></style>

 

elementUi Table Pagination 分页 实现分页多选

列表页面导出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="width: 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) {
　　// 判断存数据数组是否为空,进而进行删除和添加的判断
    if (this.selectDataArrL.length > 0) {
        this.selectDataArrL.forEach((item, index) => {
            if (item.fulfillmentControl == row.fulfillmentControl) {
                this.selectDataArrL.splice(index,1)
            } else {
                this.selectDataArrL.push(row)
            }
        })
    } else {
        this.selectDataArrL.push(row)
    }
},

　　

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

　　

2. 实现选中内容打勾?状态;切换页码或者条数重新请求数据

let data = {
    currentPage: this.currentPage,
    pageSize: this.pageSize,
}
axios.post(url, data).then((response) => {
　　// 尝试同步赋值无效,然后采用延时赋值
　　// this.list 代表列表数据
    setTimeout(() => {
        this.selectDataArrL.forEach(item =>{
            this.list.forEach(listitem => {
                if (item.fulfillmentControl == listitem.fulfillmentControl) {
                    this.$refs.multipleTable.toggleRowSelection(listitem, true)
                }
            })
        })
    },0)
})

　　

3. 导出数据整理

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

　　

 原链接： https://www.cnblogs.com/guozongzhang/p/10653320.html