vue 分页记忆勾选数据全选为单页面全选

绝地灬酷狼 2022-09-04 06:41 267阅读 0赞

**目录**

** 直接复制粘贴（记得把子组件引用上）**

表格组件

页面内容数据 全选分页清空

页面内容数据 全选分页仍然保留

--------------------

### ** ** ###

# **表格组件** #

<template>
      <div class="common-table">
        <el-table
          :data="data"
          :max-height="maxHeight"
          :height="height"
          :border="border"
          :stripe="stripe"
          :size="size"
          :show-header="showHeader"
          :tooltip-effect="tooltipEffect"
          :header-row-class-name="headerRowClassName"
          :header-row-style="headerRowStyle"
          :header-cell-class-name="headerCellClassName"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange"
          @select-all="selectall"
          @select="select"
          ref="multipleTable"
          v-loading="loading"
        >
          <slot name="table_pre" />
          <el-table-column v-if="isShowSelection" type="selection" width="40" />
          <el-table-column
            v-if="isIndex"
            :reserve-selection="true"
            type="index"
            width="50"
            label="序号"
            align="center"
          />
          <template v-for="(item, index) in columns">
            <el-table-column
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :min-width="item.minWidth"
              :fixed="item.fixed"
              :formatter="item.formatter ? item.formatter : formatterValue"
            >
            </el-table-column>
          </template>
          <slot name="table_oper" />
        </el-table>
        <el-pagination
          background
          v-if="isShowPagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currentPage"
          :page-size="pager.pageSize"
          :page-sizes="pager.pageSizes"
          :total="pager.totalCount"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </template>
    
    <script>
    export default {
      name: "commonTable",
      props: {
        columns: Array,
        data: Array,
        border: Boolean,
        loading: Boolean,
        stripe: Boolean,
        showHeader: {
          type: Boolean,
          default: true,
        },
        tooltipEffect: String,
        pager: {
          type: Object,
          default: () => {
            return {
              currentPage: 1,
              pageSize: 10,
              pageSizes: [10, 20, 30, 40, 50, 100],
              totalCount: 0,
            };
          },
        },
        isShowPagination: {
          type: Boolean,
          default: true,
        },
        size: {
          type: String,
          default: "medium",
        },
        height: [String, Number],
        maxHeight: [String, Number],
        headerRowClassName: [String, Function],
        headerRowStyle: [Object, Function],
        headerCellClassName: [String, Function],
        headerCellStyle: [Object, Function],
        isShowSelection: {
          // 是否显示复选框
          type: Boolean,
          default: false,
        },
        isIndex: {
          type: Boolean,
          default: false,
        },
      },
      methods: {
        handleSelectionChange(val) {
          this.$emit("handleSelectionChange", val);
        },
        // 手动勾选
        select(val, row) {
          this.$emit("select", val, row);
          // this.$parent.select(val,row);
        },
        //全选
        selectall(val) {
          //  this.$emit('selectall', val);
          // this.$parent.selectall(val);
          this.$emit("selectall", val);
        },
        handleSizeChange(val) {
          this.$emit("handleSizeChange", val);
        },
        handleCurrentChange(val) {
          this.$emit("handleCurrentChange", val);
        },
        formatterValue(row, column, cellValue) {
          return cellValue;
        },
      },
    };
    </script>
    <style scoped lang="scss">
    /deep/ .el-table {
      font-size: 16px !important;
    }
    
    .el-pagination {
      text-align: center;
      padding: 20px 0;
      background-color: rgba(0, 0, 0, 0);
    }
    </style>
    <style lang="scss">
    .el-pagination.is-background {
      .btn-next,
      .btn-prev {
        background-color: transparent;
        border: 1px solid #d9d9d9;
        font-weight: normal;
      }
    
      .el-pager {
        li {
          background-color: transparent;
          border: 1px solid #d9d9d9;
          font-weight: normal;
    
          /* &:not(.disabled) {
                         &:hover {
                             color: #008236 !important;
                         }
    
                         &.active {
                             background-color: #008236 !important;
                             border-color: #008236 !important;
    
                             &:hover {
                                 color: #FFFFFF !important;
                             }
                         }
                     }*/
        }
      }
    }
    </style>

# 页面内容数据 全选分页清空 #

<template>
      <div class="view-personnel">
        <div class="personnel-search bg"></div>
        <div class="personnel-main bg">
          <div class="recycle-batch" v-if="isshowBatch">
            <i style="color: #409eff" class="el-icon-info"></i> 已选择<span
              style="color: #409eff; margin: 5px"
              >{
       { batchNum }}</span
            >个订单进行批量操作
            <span @click="emptyCheck" style="color: #409eff; margin: 10px"
              >清空</span
            >
            <el-button class="btnget" type="primary" @click="getdata"
              >查询</el-button
            >
          </div>
          <commonTable
            :isShowSelection="true"
            :columns="columns"
            :data="tableData"
            :pager="page"
            border
            @handleCurrentChange="handleCurrentChange"
            @select="select"
            @selectall="selectall"
            :loading="listLoading"
            ref="elementTable"
            :header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
          >
          </commonTable>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "tabeIndex",
      data() {
        return {
          searchObj: {
            title: "",
            project: "",
            saleStatus: "",
            onlineStatus: "",
          },
          columns: [
            { prop: "id", label: "商品编码" },
            { prop: "title", label: "名称" },
            { prop: "projectName", label: "项目名称" },
            { prop: "price", label: "销售价格" },
            { prop: "service", label: "服务方式" },
            { prop: "saleStatus", label: "出售状态" },
            { prop: "onlineStatus", label: "上架状态" },
          ],
          tableData: [],
          listLoading: false,
          page: {
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 50],
            totalCount: 0,
          },
          // 存储数据id
          idSelectList: [],
          // 是否展示数据个数
          isshowBatch: false,
          // 展示的个数
          batchNum: 0,
          rowSelectList: [],
          isAllSelect: false, //  是否全选
          isSingleSelect: false, //单选
          titlename: [], //获取勾选的名称（根据自己需求）
        };
      },
      methods: {
        getList() {
          this.listLoading = true;
          setTimeout(() => {
            let totalCount = 10 * 2;
            this.tableData = Array.from({ length: 10 }).map((item, index) => {
              let _index = `${
                index + 1 + (this.page.currentPage - 1) * this.page.pageSize
              }`;
    
              return {
                id: `${_index}`,
                title: `男士普通理发${_index}`,
                projectName: `理发服务${_index}`,
                price: `1${_index}.00`,
                service: `到店_${_index}`,
                saleStatus: `在售_${_index}`,
                onlineStatus: `上架_${_index}`,
              };
            });
            this.page.totalCount = totalCount;
            // 处理全选或 部分选择状态
            this.$nextTick(() => {
              this.tableData.forEach((row) => {
                if (!this.getHasKey(row)) {
                  this.$refs.elementTable.$refs.multipleTable.toggleRowSelection(
                    row,
                    true
                  );
                }
              });
              // }
            });
            this.listLoading = false;
          }, 200);
        },
        // 重新渲染name列
        formatter(row, column, cellValue) {
          return "hello " + row.tel;
        },
        getdata() {
          console.log(this.idSelectList);
          console.log(this.titlename);
          console.log(this.rowSelectList);
        },
        // 定义根据唯一数据进行排除
        getHasKey(row) {
          let isSelect = true; //  默认是有
          for (let k = 0; k < this.idSelectList.length; k++) {
            if (this.idSelectList[k] == row.id) {
              isSelect = false;
              k = this.idSelectList.length;
            }
          }
          return isSelect;
        },
        // 单选
        select(val, tabRow) {
          // 是选中就追加到rowSelectList， 取消就剔除
          this.isSingleSelect = true;
          // 先查出当前选的这条是选上还是取消 ,
          if (this.getHasKey(tabRow)) {
            // 如果已选的这里没有就push
            for (let i = 0; i < val.length; i++) {
              if (val[i].id == tabRow.id) {
                this.rowSelectList.push(tabRow);
                this.idSelectList.push(tabRow.id);
                this.titlename.push(tabRow.title);
              }
            }
            // 展示选中后的提示
            this.isshowBatch = true;
            this.batchNum = this.idSelectList.length;
          } else {
            for (let u = 0; u < this.idSelectList.length; u++) {
              if (this.idSelectList[u] == tabRow.id) {
                this.titlename.splice(u, 1);
                this.idSelectList.splice(u, 1);
                this.rowSelectList.splice(u, 1);
              }
            }
            this.batchNum = this.idSelectList.length;
            //  判处选中几个
            if (this.batchNum === 0) {
              this.isshowBatch = false;
            }
          }
        },
        //全选
        selectall(val) {
          this.isAllSelect = false;
          // 展示提示框
          this.isshowBatch = false;
          this.batchNum = val.length;
          this.idSelectList = [];
          this.titlename = [];
          this.rowSelectList = [];
          if (val.length > 0 || val.length == this.tableData.length) {
            this.isAllSelect = true;
            this.isshowBatch = true;
            this.batchNum = val.length;
            for (let key in val) {
              this.idSelectList.push(val[key].id);
              this.titlename.push(val[key].title);
              this.rowSelectList.push(val[key]);
            }
          } else {
            this.rowSelectList = [];
            this.idSelectList = [];
            this.titlename = [];
            this.rowSelectList = [];
            this.isAllSelect = false;
            this.isshowBatch = false;
            this.batchNum = 0;
            // 没有选中就进行隐藏
            if (val.length === 0) {
              this.isshowBatch = false;
            }
          }
        },
        // 翻页处理
        handleCurrentChange(val) {
          this.page.currentPage = val;
          if (this.idSelectList.length > 0) {
            this.batchNum = this.idSelectList.length;
            this.isshowBatch = true;
          }
          if (this.isAllSelect) {
            if (this.isSingleSelect) {
              //  this.getList();
              this.isSingleSelect = false;
              this.isAllSelect = true;
              return;
            }
            this.idSelectList = [];
            this.rowSelectList = [];
            // 单选
            this.isSingleSelect = false;
            this.isAllSelect = false;
            this.isshowBatch = false;
          }
          this.getList();
        },
        // 清空
        emptyCheck() {
          this.$refs.elementTable.$refs.multipleTable.clearSelection();
          this.rowSelectList = [];
          this.isAllSelect = false;
          this.idSelectList = [];
          this.titlename = [];
          this.rowSelectList = [];
          // 没有选中就进行隐藏
          this.isshowBatch = false;
        },
      },
      created() {
        this.getList();
      },
    };
    </script>
    
    <style scoped lang="scss">
    .personnel-search {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 20px;
    
      /deep/ .common-input {
        margin-bottom: 15px;
      }
    
      & > div {
        width: 24%;
      }
    
      .search-button {
        width: 100%;
        text-align: right;
    
        /deep/ .el-button {
          font-size: 16px;
        }
      }
    }
    .recycle-batch {
      height: 40px;
      border: 1px solid rgba(186, 231, 255, 1);
      line-height: 40px;
      border-radius: 4px;
      padding-left: 20px;
      margin-bottom: 12px;
      background: rgba(230, 247, 255, 1);
    }
    .btnget {
      float: right;
      margin-right: 5%;
    }
    </style>

#   **页面内容数据**** 全选分页仍然保留** #

<template>
      <div class="view-personnel">
        <div class="personnel-search bg"></div>
        <div class="personnel-main bg">
          <div class="recycle-batch" v-if="isshowBatch">
            <i style="color: #409eff" class="el-icon-info"></i> 已选择<span
              style="color: #409eff; margin: 5px"
              >{
       { batchNum }}</span
            >个订单进行批量操作
            <span @click="emptyCheck" class="empty-hovuer"  
              >清空</span
            >
            <el-button class="btnget" type="primary" @click="getdata"
              >查询</el-button
            >
          </div>
          <commonTable
            :isShowSelection="true"
            :columns="columns"
            :data="tableData"
            :pager="page"
            border
            @handleCurrentChange="handleCurrentChange"
            @select="select"
            @selectall="selectall"
            :loading="listLoading"
            ref="elementTable"
            :header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
          >
          </commonTable>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "tabeIndex",
      data() {
        return {
          searchObj: {
            title: "",
            project: "",
            saleStatus: "",
            onlineStatus: "",
          },
          columns: [
            { prop: "id", label: "商品编码" },
            { prop: "title", label: "名称" },
            { prop: "projectName", label: "项目名称" },
            { prop: "price", label: "销售价格" },
            { prop: "service", label: "服务方式" },
            { prop: "saleStatus", label: "出售状态" },
            { prop: "onlineStatus", label: "上架状态" },
          ],
          tableData: [],
          listLoading: false,
          page: {
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 50],
            totalCount: 0,
          },
          // 存储数据id
          idSelectList: [],
          // 是否展示数据个数
          isshowBatch: false,
          // 展示的个数
          batchNum: 0,
          rowSelectList: [],
          isAllSelect: false, //  是否全选
          isSingleSelect: false, //单选
          titlename: [], //获取勾选的名称（根据自己需求）
        };
      },
      methods: {
        getList() {
          this.listLoading = true;
          setTimeout(() => {
            let totalCount = 10 * 5;
            this.tableData = Array.from({ length: 10 }).map((item, index) => {
              let _index = `${
                index + 1 + (this.page.currentPage - 1) * this.page.pageSize
              }`;
    
              return {
                id: `${_index}`,
                title: `男士普通理发${_index}`,
                projectName: `理发服务${_index}`,
                price: `1${_index}.00`,
                service: `到店_${_index}`,
                saleStatus: `在售_${_index}`,
                onlineStatus: `上架_${_index}`,
              };
            });
            this.page.totalCount = totalCount;
            // 处理全选或 部分选择状态
            this.$nextTick(() => {
              this.tableData.forEach((row) => {
                if (!this.getHasKey(row)) {
                  this.$refs.elementTable.$refs.multipleTable.toggleRowSelection(
                    row,
                    true
                  );
                }
              });
              // }
            });
            this.listLoading = false;
          }, 200);
        },
        // 重新渲染name列
        formatter(row, column, cellValue) {
          return "hello " + row.tel;
        },
        getdata() {
          console.log(this.idSelectList);
          console.log(this.titlename);
          console.log(this.rowSelectList);
        },
        // 定义根据唯一数据进行排除
        getHasKey(row) {
          let isSelect = true; //  默认是有
          for (let k = 0; k < this.idSelectList.length; k++) {
            if (this.idSelectList[k] == row.id) {
              isSelect = false;
              k = this.idSelectList.length;
            }
          }
          return isSelect;
        },
        // 单选
        select(val, tabRow) {
          // 是选中就追加到rowSelectList， 取消就剔除
          this.isSingleSelect = true;
          // 先查出当前选的这条是选上还是取消 ,
          if (this.getHasKey(tabRow)) {
            // 如果已选的这里没有就push
            for (let i = 0; i < val.length; i++) {
              if (val[i].id == tabRow.id) {
                this.rowSelectList.push(tabRow);
                this.idSelectList.push(tabRow.id);
                this.titlename.push(tabRow.title);
              }
            }
            // 展示选中后的提示
            this.isshowBatch = true;
            this.batchNum = this.idSelectList.length;
          } else {
            for (let u = 0; u < this.idSelectList.length; u++) {
              if (this.idSelectList[u] == tabRow.id) {
                this.titlename.splice(u, 1);
                this.idSelectList.splice(u, 1);
                this.rowSelectList.splice(u, 1);
              }
            }
            this.batchNum = this.idSelectList.length;
            //  判处选中几个
            if (this.batchNum === 0) {
              this.isshowBatch = false;
            }
          }
        },
        // //全选
        // selectall(val) {
        //   this.isAllSelect = false;
        //   // 展示提示框
        //   this.isshowBatch = false;
        //   this.batchNum = val.length;
        //   this.idSelectList = [];
        //   this.titlename = [];
        //   this.rowSelectList = [];
        //   if (val.length > 0 || val.length == this.tableData.length) {
        //     this.isAllSelect = true;
        //     this.isshowBatch = true;
        //     this.batchNum = val.length;
        //     for (let key in val) {
        //       this.idSelectList.push(val[key].id);
        //       this.titlename.push(val[key].title);
        //       this.rowSelectList.push(val[key]);
        //     }
        //   } else {
        //     this.rowSelectList = [];
        //     this.idSelectList = [];
        //     this.titlename = [];
        //     this.rowSelectList = [];
        //     this.isAllSelect = false;
        //     this.isshowBatch = false;
        //     this.batchNum = 0;
        //     // 没有选中就进行隐藏
        //     if (val.length === 0) {
        //       this.isshowBatch = false;
        //     }
        //   }
        // },
    
          //全选
        selectall(val) {
          if (val.length > 0 || val.length == this.tableData.length) {
            // 全选
            // if (val.length > 0 || val.length == this.tableData.length) {
            // this.isAllSelect = true;
            this.isshowBatch = true;
            for (let key in val) {
              let noSelect = true;
              for (let e = 0; e < this.idSelectList.length; e++) {
                if (val[key].id == this.idSelectList[e]) {
                  noSelect = false;
                }
              }
              if (noSelect) {
                // 如果所选内容无该项， 就加进
                this.titlename.push(val[key].orderNo);
                this.idSelectList.push(val[key].id);
              }
            }
          } else {
            //  取消全选
    
            for (let i = 0; i < this.tableData.length; i++) {
              for (let k = 0; k < this.idSelectList.length; k++) {
                let noData = true;
                if (this.tableData[i].id == this.idSelectList[k]) {
                  // noData = false;
                  this.titlename.splice(k, 1);
                  this.idSelectList.splice(k, 1);
                }
              }
            }
    
            // // 没有选中就进行隐藏
          }
          if (this.titlename.length == 0) {
            this.isshowBatch = false;
          }
          this.batchNum = this.titlename.length;
          //  console.log("全选",this.orderNoSelectList)
        },
        // 翻页处理
        handleCurrentChange(val) {
          this.page.currentPage = val;
          if (this.idSelectList.length > 0) {
            this.batchNum = this.idSelectList.length;
            this.isshowBatch = true;
          }
          // if (this.isAllSelect) {
          //   if (this.isSingleSelect) {
          //     //  this.getList();
          //     this.isSingleSelect = false;
          //     this.isAllSelect = true;
          //     return;
          //   }
          //   this.idSelectList = [];
          //   this.rowSelectList = [];
          //   // 单选
          //   this.isSingleSelect = false;
          //   this.isAllSelect = false;
          //   this.isshowBatch = false;
          // }
          this.getList();
        },
        // 清空
        emptyCheck() {
          this.$refs.elementTable.$refs.multipleTable.clearSelection();
          this.rowSelectList = [];
          this.isAllSelect = false;
          this.idSelectList = [];
          this.titlename = [];
          this.rowSelectList = [];
          // 没有选中就进行隐藏
          this.isshowBatch = false;
        },
      },
      created() {
        this.getList();
      },
    };
    </script>
    
    <style scoped lang="scss">
    .personnel-search {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 20px;
    
      /deep/ .common-input {
        margin-bottom: 15px;
      }
    
      & > div {
        width: 24%;
      }
    
      .search-button {
        width: 100%;
        text-align: right;
    
        /deep/ .el-button {
          font-size: 16px;
        }
      }
    }
    .recycle-batch {
      height: 40px;
      border: 1px solid rgba(186, 231, 255, 1);
      line-height: 40px;
      border-radius: 4px;
      padding-left: 20px;
      margin-bottom: 12px;
      background: rgba(230, 247, 255, 1);
    }
    .btnget {
      float: right;
      margin-right: 5%;
    }
    .empty-hovuer {
      color: #409eff;
      margin: 10px;
    }
    .empty-hovuer:hover {
      cursor: pointer;
    }
    </style>