element table多选只能选中当前页数据_封装element-ui表格，我是这样做的

日日加班至夜半，环视周围无人走； 明晚八点准时走，谁不打卡谁是狗。

使用过element-ui的表格的同学应该都有这样的体会，做一个简单的表格还比较容易，但如果这个表格包含了顶部的按钮，还有分页，甚至再包含了行编辑，那开发工作量就成倍的增加，特别是在开发管理系统的时候，表格一个接一个的去开发， 即浪费时间，还对个人没有什么提升。今天小编带来了自己封装的一个表格，让你用JSON就可以简单的生成表格。

本文主要集中于封装思想与核心代码说明，完整代码请访问 https://github.com/snowzijun/vue-element-table,如果觉得有用，麻烦给小编一个 star,你的每一个 star都是对小编的支持，当前功能比较简陋，本仓库将持续更新。同时您也可以微信搜索【前端有的玩】公众号，与小编进行沟通。

表格需求

一般管理系统对表格会有以下需求

1. 可以分页（需要有分页条）
2. 可以多选（表格带复选框）
3. 顶部需要加一些操作按钮（新增，删除等等）
4. 表格每行行尾有操作按钮
5. 表格行可以编辑

如下图为一个示例表格

如果我们直接使用element-ui提供的组件的话，那么开发一个这样的表格就需要使用到以下内容

1. 需要使用表格的插槽功能，开发每一行的按钮
2. 需要通过样式调整顶部按钮，表格，分页条的布局样式
3. 需要监听分页的事件然后去刷新表格数据
4. 顶部按钮或操作按钮如果需要获取表格数据，需要调用表格提供的api
5. 对于有行编辑的需求，还需要通过插槽去渲染行编辑的内容，同时要控制行编辑的开关

不仅仅开发表格比较麻烦，而且还要考虑团队协作，如果每个人实现表格的方式存在差别，那么可能后期的维护成本也会变得很高。那怎么办呢？

项目安装

安装插件

在使用element-ui的项目中，可以通过以下命令进行安装

npm install vue-elementui-table -S

在项目中使用

在main.js中添加以下代码

import ZjTable from 'vue-element-table'

Vue.use(ZjTable)

然后即可像下文中的使用方式进行使用

表格配置

为了满足团队快速开发的需要，小编对上面提出来的需求进行了封装，然后使用的时候，开发人员只需要配置一些JSON便可以完成以上功能的开发。

基础配置

一个基础的表格包含了数据和列信息，那么如何用封装的表格去配置呢？

<template>
  <zj-table
    :columns="columns"
    :data="data"
    :pagination="false"
  />
</template>
<script>
export default {
    
  data() {
    
    return {
    
      // 表格的列信息, 数组每一项代表一个字段，可以使用element 列属性的所有属性，以下仅为示例
      columns: Object.freeze([
        {
    
          // 表头显示的文字
          label: '姓名',
          // 对应数据里面的字段
          prop: 'name'
        },
        {
    
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          formatter(row, column, cellValue) {
    
            return cellValue === 1 ? '男' : '女'
          }
        },
        {
    
          label: '年龄',
          prop: 'age'
        }
      ]),
      data: [
        {
    
          name: '子君',
          sex: 1,
          age: 18
        }
      ]
    }
  }
}
</script>

通过上面的配置，就可以完成一个基础表格的开发，完整代码见 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/base.vue，效果如下图所示

表格默认会显示复选框，也可以通过配置selectable属性来关闭掉

添加分页

简单的表格用封装之后的或未封装的开发工作量区别并不大，我们继续为表格添加上分页

<template>
	<!--
    current-page.sync 表示页码, 添加上 .sync 在页码发生变化时自动同步页码
    page-size.sync 每页条数
    total  总条数
    height="auto" 配置height:auto, 表格高度会根据内容自动调整，如果不指定，表格将保持充满父容器，同时表头会固定，不跟随滚动条滚动
    @page-change 无论pageSize currentPage 哪一个变化，都会触发这个事件
  -->
  <zj-table
    v-loading="loading"
    :columns="columns"
    :data="data"
    :current-page.sync="currentPage"
    :page-size.s