HUA
首页/文章/vue

el-table多选分页与全选分页

2024-05-30
910 字约 4 分钟
...
学习

一、el-table多选分页时，记住其他页的选中状态

实现方法：
核心是el-table-column的reserve-selection属性

image.png

1.通过type="selection"设置复选框列，重点在于 reserve-selection 属性，设置为true时，数据更新之后保留之前选中的数据。
2.需要表格属性“row-key”的配合，在使用 reserve-selection 功能的情况下，该属性是必填的。将row-key设置为表格中唯一的字段名称（例如programId）。这样就实现了后端分页在翻页或切换条数时，记住之前的复选框选项。

<el-table
        :data="tableData"
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        />
        ...
</el-table>
getRowKey(row) {
      
      return row.id
},
handleSelectionChange(selected) {
      console.log('选中的数据list---', selected)
},

二、el-table在ajax分页时支持单页全选和所有页全选

image.png

image.png

界面代码：

 <el-table :data="tableData"
                    :height="tableHeight"
                    border
                    style=" 100%"
                    ref="table"
                    @selection-change="handleSelectionChange"
                    >
            <el-table-column prop="id"
                             fixed
                             align="center">
              <el-table-column type="selection"
                               width="75">
              </el-table-column>
              <template slot="header"  slot-scope="scope">
                <div>
                  <el-checkbox v-model="checkedAll"
                               @change="changeCheckAll">所有</el-checkbox>
                </div>
              </template>
            </el-table-column>
　　　 ......
　　</el-table>
          <pager :pager="pager"
                 @query="getList"
                 @setPager="onChangePage"></pager>

table上使用了ref属性，因为全选和反选时要用到dom操作方法toggleRowSelection，同样，表格自动铺满纵向屏幕时，也需要进行dom操作，这并非本节所讲内容，只是简单提一下，el-table并没有像layui中的table那样提供百分比-固定像素的方式响应式制定表格高度，我们得手动用js计算浏览器屏幕高度。
　js部分代码如下：

import pager from "@/components/table/Pager.vue";

 export default {
 components: {pager},
  data () {
    return {
   checkedAll: false, 
 }
 },
  methods: {
   
    handleSelectionChange (val) {
      this.loading = val.length > 0 ? false : true;
        this.multipleSelection = val;
    },
    
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row);
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
    
    changeCheckAll (val) {
      if (val) {
        
        this.tableData.forEach(row => {
          if (row) {
            this.$refs.table.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
 }
}

在每次点击“页码“之后，会自动执行查询方法，此时，如果点击了全选所有按钮，要在数据执行查询之后，再选中当前页面所有项，代码如下所示：
由于所有的dom操作要在dom渲染之后执行，所以使用了this.$nextTick()方法。

 if(this.checkedAll){
           this.$nextTick(()=>{
            this.changeCheckAll(this.checkedAll);
           })
    }

在element-ui的Table组件当中，并没有提供给表头当中的复选框设置文本的属性和方法，我们可以通过使用css伪类来创建文本。
/deep/用于在css作用域当中进行样式透传，覆盖子组件的样式。

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  content: "当页";
  color: #606266;
  font-weight: 500;
  margin-left: 10px;
  font-size: 14px;
}

分页组件Pager.vue是对el-pagination组件的二次封装，其代码如下：
最重要的一点，就是所有页全选时的id集合，是每次查询时传递过来的，将其临时存储在data中，这样的话需要进行批量操作时，可以直接将这些id集合传递过去。当然，如果查询接口不把这些id集合带过来，我们也可以传一个所有页全选的标识给到后端，后端根据这个标识，重新去查询数据。

 <template>
  <div class="pagination-box clear">
    <span class="page-total fl">
      共有记录：
      <span>{{ pager.total }}</span>条
    </span>
    <el-pagination
      :small="small"
      :layout="layout"
      background
      :pager-count="7"
      :total="pager.total"
      :current-page.sync="pager.pageNum"
      :page-size="pager.pageSize"
      :page-sizes="pageSize"
      @size-change="onChangeSize"
      @current-change="onChangePage"
    ></el-pagination>
    <span v-if="refresh" class="btn-refresh fn-right" title="刷新" @click="$emit('query')">
      <i class="fas fa-redo"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "Pager",
  props: {
    small: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: "sizes,jumper, prev, pager, next"
    },
    pager: {
      type: Object,
      required: true
    },
    refresh: {
      type: Boolean
    },
    pageSize: {
      type: Array,
      default: () => {
        return [10, 15, 20, 50, 100, 200];
      }
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
        pageNum: "pageNum", // 第几页
        pageSize: "pageSize", // 显示条数
        total: "total" // 总记录条数
      })
    }
  },
  // 设置绑定参数
  model: {
    prop: "pager",
    event: "setPager"
  },
  computed: {
    total() {
      return this.pager[this.props.total] || 0;
    },
    // 检测获取到的数据是否为空
    isEmptyList() {
      return (
        Math.ceil(
          this.pager[this.props.total] / this.pager[this.props.pageSize]
        ) < this.pager[this.props.pageNum]
      );
    }
  },
  watch: {
    total() {
      // 存在记录但未获取到数据时, 重新请求
      if (this.pager[this.props.pageNum] > 1 && this.isEmptyList) {
        this.$emit(
          "setPager",
          Object.assign(this.pager, {
            [this.props.pageNum]: this.pager[this.props.pageNum] - 1
          })
        );
        this.$emit("query");
      }
    }
  },
  methods: {
    // 每页条数
    onChangeSize(pageSize) {
      const temp = {
        [this.props.pageSize]: pageSize,
        // 当显示条数小于或等于总条数时，重置页数
        [this.props.pageNum]:
          pageSize <= this.total ? 1 : this.pager[this.props.pageNum]
      };
      this.$emit("setPager", Object.assign(this.pager, temp));
      // 触发父组件查询请求
      this.$emit("query");
    },
    // 翻页
    onChangePage(pageNum) {
      this.$emit(
        "setPager",
        Object.assign(this.pager, { [this.props.pageNum]: pageNum })
      );
      this.$emit("query");
    }
  }
};
</script>
<style lang="scss" scoped>
.pagination-box {
   100%;
  padding-top: 14px;
  position: relative;
  .el-pagination {
    float: right;
  }
  /deep/ .el-pagination__sizes {
    position: absolute;
    top: 14px;
    left: 150px !important;
  }
}
.page-total {
  padding-left: 20px;
  height: 31px;
  line-height: 31px;
  font-size: 14px;
  color: #838383;
}

.page-total span {
  color: #3a3a3a;
}

.closeBtn {
  text-align: center;
  margin-top: 10px;
}

.el-input--small .el-input__inner {
  height: 25px;
  line-height: 25px;
}

.el-input__inner {
  border-color: #838383;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  font-size: 19px;
  position: relative;
  top: -3px;
}
.el-pager li {
  margin: 0 8px;
  border-radius: 3px;
  height: 24px;
  line-height: 24px;
  min- 20px;
}

.el-pager li.active {
  background: #1881bf !important;
}

.el-pagination__jump {
  margin-right: 20px;
  font-size: 14px;
  color: #838383;
}

.el-pagination__jump .pagination__editor {
  margin-right: 20px;
}

.el-pagination__jump .el-pagination__editor.el-input {
   28px;
}
.el-pagination__jump .el-input__inner {
  box-sizing: border-box;
   100%;
  color: #3a3a3a;
  font-size: 14px;
  border-color: #838383 !important;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  background: #fff !important;
}

.el-pagination .el-select .el-input .el-input__inner {
  border-radius: 15px !important;
  font-size: 14px;
  border-color: #838383 !important;
  background: #fff !important;
}
.el-button--text > span > span {
  color: #1881bf;
  font-size: 12px;
  text-decoration: underline;
}
</style>

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
vue2025-10-22
shallowRef 与 ref 的区别、场景与坑位
结论先行： 会 深度 地把你放进去的对象转成响应式（递归代理），因此"对象内部的改动"也会触发视图更新。 只在 顶层 做依赖追踪： 更换 才触发更新 ；若你只是"在原对象上改属性"，不会触发，除非手动 。 1\. 快速对比 维度 追踪粒度 深度（递归） 仅顶层 对象内部属性变更 会触发更新 不会 触发（除非 或重新赋值） 性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例（图表...
学习面试
vue2025-10-20
Vue 3 中的 setup执行时机与异步逻辑详解
Vue 3 中的 执行时机与异步逻辑详解 本文详细介绍 Vue 3 组合式 API 的核心函数 ：它在组件生命周期中的执行时机、异步行为（ 的影响）、常见用法和最佳实践。 一、 的执行时机 是 Vue 3 组件实例创建后、渲染前执行的函数。 它相当于 Vue 2 中的 和 的合体。 执行流程： 也就是说： 所有响应式数据（ 、 、 ）都在这里定义； 所有生命周期钩子（ 、 等）都在这里注册； 模板渲染会等待 执行完成（或异步返回的 Pr...
学习面试
vue2025-10-08
vue中ref与reactive
Vue 3 的 与 ：区别、实现，以及为什么更推荐 1\. 一句话结论 ：适合 原始类型 或 独立、细粒度 的状态单元；类型推断明确、解构安全、追踪粒度更小， 默认首选 。 ：适合管理 对象/集合 这类结构化状态；但 解构会丢失响应性 ， 默认 非深度 ，需要正确的使用姿势配合。 2\. 用法与语义差异 2.1 基本示例 2.2 模板中的解包（unwrapping） 在 模板 里， 会 自动解包 ，可直接写 ，不必 。 在响应式对象中...
学习面试
vue2025-09-23
Vue3 中computed属性依赖总结
Vue3 属性依赖总结 1. 依赖收集机制 的 getter 内部 读取 到哪些响应式变量 ( / )，就会把这些变量收集为依赖。 当这些依赖发生变化时， 会重新计算。 2. 如果只返回常量 始终是 。 修改 或 不会触发 重新计算，因为 getter 内没有访问它们。 3. 如果访问了响应式变量但仍返回常量 初始化时会打印一次。 当 或 改变时，getter 会重新执行（再次打印），因为它们被收集为依赖。 但 依旧始终是 。 4. 总...
学习面试
vue2025-09-17
template标签为什么不可以使用v-show
前言 写 Vue 时，最容易踩的小坑之一，就是给 套一个 。编辑器不报错，页面却“消失”了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒： 不是真节点，它只是个“草稿纸”。 一、为什么 拒绝 v show 的本质是切换元素的 CSS： 。浏览器要找到真实 DOM 节点，才能给它加样式。而 在运行时会被完全剥离，不会留下任何标签，Vue 找不到节点，也就无处下刀。 举个反面教材： 打开控制台，你会看到 还是生成了，但...
学习面试
vue2025-09-17
Vue 3中watchEffect自动追踪详解
Vue 3 自动追踪详解 一、是什么 是 Vue 3 Composition API 提供的一个响应式副作用（side effect）函数。 它会 立即执行一次回调函数 ，并且在回调函数中访问到的所有响应式数据（ref、reactive、computed 等）都会被 自动追踪 。 当这些依赖的响应式数据发生变化时，回调会重新执行。 简单理解： 能“自动发现”它用到的响应式变量，不需要手动指定依赖。 二、基本用法 特点： 第一次立即执行...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录