vue-elementui-table

介绍

在开发管理系统的时候，经常会开发大量的表格，但是直接使用element-ui的原生组件时候，不仅写法繁琐，而且自身并不具备分页，行编辑，顶部按钮等等功能，需要通过插槽或者多个组件组合才能实现，本项目是基于element-ui二次封装的表格,具体功能点见下文。

我是子君，如果觉得这个框架有用，麻烦给我一个star,谢谢，同时欢迎您关注公众号【前端有的玩】，邀你一起玩前端

主要功能

分页
顶部按钮
行编辑按钮
自带复选框
行编辑
自适应高度
链接列
插槽列
顶部按钮，行编辑按钮支持下拉按钮
其他功能

具体功能见示例

待开发功能

通过属性配置分页位置在顶部还是底部，或者顶部底部都显示
可以支持更丰富的行编辑表单组件
可以支持配置搜索功能
支持滚动加载
欢迎大家提 issues

常用命令

安装

npm install vue-elementui-table -S

在项目中使用

在main.js中添加以下代码

 
import ZjTable from 'vue-element-table'
Vue.use(ZjTable)

查看官方示例

下载github源码，然后执行下面命令即可查看示例

npm run serve

代码格式化

npm run lint

使用说明

点击访问 https://juejin.im/post/5f1d92cb5188252e884e986f，即可查看使用说明

基本表格

只显示表头与数据

<template>
  <div style="height: 500px;">
    <zj-table :columns="columns" :data="data" :pagination="false" />
  </div>
</template>
 
<script>
export default {
  components: {},
  data() {
    return {
      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
        }
      ],
      // 是否显示多选框
      selectable: true,
      // 是否显示序号列
      sequence: true
    }
  }
}
</script>

使用分页

<template>
  <zj-table
    v-loading="loading"
    :columns="columns"
    :data="data"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    height="auto"
    @page-change="$_handlePageChange"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          formatter(row, column, cellValue) {
            return cellValue === 1 ? '男' : '女'
          }
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ]),
      data: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 总条数
      total: 0,
      loading: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载表格数据
    loadData() {
      this.loading = true
      setTimeout(() => {
        this.total = 40
        const { currentPage, pageSize } = this
        this.data = new Array(pageSize).fill({}).map((item, index) => {
          return {
            name: `子君${currentPage + (index + 1) * 10}`,
            sex: Math.random() > 0.5 ? 1 : 0,
            age: Math.floor(Math.random() * 100)
          }
        })
        this.loading = false
      }, 1000)
    },
    $_handlePageChange() {
      // 因为上面设置属性指定了.sync,所以这两个属性会自动变化
      console.log(this.pageSize, this.currentPage)
      this.loadData()
    }
  }
}
</script>

使用顶部按钮与行操作按钮

<template>
  <zj-table
    v-loading="loading"
    :columns="columns"
    :data="data"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    :buttons="buttons"
    @page-change="$_handlePageChange"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          // 可以指定列的宽度，与element-ui原生用法一致
          width: 220,
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          formatter(row, column, cellValue) {
            return cellValue === 1 ? '男' : '女'
          }
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '公众号',
          prop: 'officialAccount'
        },
        // 行编辑按钮，在表格末尾出现，自动锁定右侧
        {
          width: 180,
          label: '操作',
          actions: [
            {
              id: 'follow',
              text: '关注作者',
              click: this.$_handleFollowAuthor
            },
            {
              id: 'edit',
              text: '编辑',
              // 可以通过before控制按钮是否显示，比如下面年龄四十岁的才会显示编辑按钮
              before(row) {
                return row.age < 40
              },
              click: this.$_handleEdit
            },
            {
              id: 'delete',
              text: '删除',
              icon: 'el-icon-delete',
              disabled(row) {
                return row.sex === 0
              },
              // 为了拿到this,这里需要用箭头函数
              click: () => {
                this.$alert('女生被禁止删除了')
              }
            }
          ]
        }
      ]),
      data: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 总条数
      total: 0,
      loading: false,
      buttons: Object.freeze([
        {
          // id 必须有而且是在当前按钮数组里面是唯一的
          id: 'add',
          text: '新增',
          type: 'primary',
          icon: 'el-icon-circle-plus',
          click: this.$_handleAdd
        },
        {
          id: 'delete',
          text: '删除',
          // rows 是表格选中的行，如果没有选中行，则禁用删除按钮, disabled可以是一个boolean值或者函数
          disabled: rows => !rows.length,
          click: this.$_handleRemove
        },
        {
          id: 'auth',
          text: '这个按钮根据权限显示',
          // 可以通过返回 true/false来控制按钮是否显示
          before: (/** rows */) => {
            return true
          }
        },
        {
          id: 'dropdown',
          text: '下拉按钮',
          children: [
            {
              id: 'moveUp',
              text: '上移',
              icon: 'el-icon-arrow-up',
              click: () => {
                console.log('上移')
              }
            },
            {
              id: 'moveDown',
              text: '下移',
              icon: 'el-icon-arrow-down',
              disabled: rows => !rows.length,
              click: () => {
                console.log('下移')
              }
            }
          ]
        }
      ])
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载表格数据
    loadData() {
      this.loading = true
      setTimeout(() => {
        this.total = 40
        const { currentPage, pageSize } = this
        this.data = new Array(pageSize).fill({}).map((item, index) => {
          return {
            id: currentPage + (index + 1) * 10,
            name: `子君${currentPage + (index + 1) * 10}`,
            sex: Math.random() > 0.5 ? 1 : 0,
            age: Math.floor(Math.random() * 100),
            officialAccount: '前端有的玩'
          }
        })
        this.loading = false
      }, 1000)
    },
    $_handlePageChange() {
      // 因为上面设置属性指定了.sync,所以这两个属性会自动变化
      console.log(this.pageSize, this.currentPage)
      this.loadData()
    },
    // 新增
    $_handleAdd() {
      this.$alert('点击了新增按钮')
    },
    // 顶部按钮会自动将表格所选的行传出来
    $_handleRemove(rows) {
      const ids = rows.map(({ id }) => id)
      this.$alert(`要删除的行id为${ids.join(',')}`)
    },
    // 关注作者公众号
    $_handleFollowAuthor() {
      const image = require('../../assets/qrcode.png')
      const h = this.$createElement
      this.$msgbox({
        title: '扫码关注',
        message: h('img', {
          attrs: {
            src: image
          },
          style: {
            width: '400px'
          }
        })
      })
    },
    /**
     * row 这一行的数据
     */
    $_handleEdit(row, column) {
      console.log(row, column)
      this.$alert(`点击了姓名为【${row.name}】的行上的按钮`)
    }
  }
}
</script>

按钮使用插槽

<template>
  <zj-table
    v-loading="loading"
    :columns="columns"
    :data="data"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    :buttons="buttons"
    @page-change="$_handlePageChange"
  >
    <template #button="{id}">
      <template v-if="id === 'slot'">
        <el-button>
          自定义顶部按钮
        </el-button>
      </template>
    </template>
 
    <template #action="{id}">
      <template v-if="id === 'slot'">
        <el-button type="text">
          自定义操作按钮
        </el-button>
      </template>
    </template>
  </zj-table>
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          // 可以指定列的宽度，与element-ui原生用法一致
          width: 220,
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          formatter(row, column, cellValue) {
            return cellValue === 1 ? '男' : '女'
          }
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '公众号',
          prop: 'officialAccount'
        },
        // 行编辑按钮，在表格末尾出现，自动锁定右侧
        {
          width: 220,
          label: '操作',
          actions: [
            {
              id: 'follow',
              text: '关注作者',
              click: this.$_handleFollowAuthor
            },
            {
              id: 'slot',
              useSlot: true
            }
          ]
        }
      ]),
      data: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 总条数
      total: 0,
      loading: false,
      buttons: Object.freeze([
        {
          // id 必须有而且是在当前按钮数组里面是唯一的
          id: 'add',
          text: '新增',
          type: 'primary',
          icon: 'el-icon-circle-plus',
          click: this.$_handleAdd
        },
        {
          id: 'slot',
          useSlot: true
        }
      ])
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载表格数据
    loadData() {
      this.loading = true
      setTimeout(() => {
        this.total = 40
        const { currentPage, pageSize } = this
        this.data = new Array(pageSize).fill({}).map((item, index) => {
          return {
            id: currentPage + (index + 1) * 10,
            name: `子君${currentPage + (index + 1) * 10}`,
            sex: Math.random() > 0.5 ? 1 : 0,
            age: Math.floor(Math.random() * 100),
            officialAccount: '前端有的玩'
          }
        })
        this.loading = false
      }, 1000)
    },
    $_handlePageChange() {
      // 因为上面设置属性指定了.sync,所以这两个属性会自动变化
      console.log(this.pageSize, this.currentPage)
      this.loadData()
    },
    // 新增
    $_handleAdd() {
      this.$alert('点击了新增按钮')
    }
  }
}
</script>

表格行编辑

<template>
  <zj-table
    ref="table"
    :columns="columns"
    :data="data"
    :pagination="false"
    :selectable="selectable"
    :sequence="sequence"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          label: '姓名',
          prop: 'name',
          editable: true,
          field: {
            componentType: 'input',
            rules: [
              {
                required: true,
                message: '请输入姓名'
              }
            ]
          }
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          formatter(row, column, cellValue) {
            return cellValue === '1' ? '男' : '女'
          },
          editable: true,
          field: {
            componentType: 'select',
            options: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '0'
              }
            ]
          }
        },
        {
          label: '年龄',
          prop: 'age',
          editable: true,
          field: {
            componentType: 'number'
          }
        },
        {
          label: '操作',
          actions: [
            {
              id: 'edit',
              text: '编辑',
              before: row => {
                return !this.editIds.includes(row.id)
              },
              click: this.$_handleEdit
            },
            {
              id: 'save',
              text: '保存',
              before: row => {
                return this.editIds.includes(row.id)
              },
              click: this.$_handleSave
            }
          ]
        }
      ]),
      data: [
        {
          // 行编辑必须指定rowKey字段，默认是id,如果修改为其他字段，需要给表格指定row-key="字段名"
          id: '0',
          name: '子君',
          sex: '1',
          age: 18
        },
        {
          // 行编辑必须指定rowKey字段，默认是id,如果修改为其他字段，需要给表格指定row-key="字段名"
          id: '1',
          name: '子君1',
          sex: '0',
          age: 18
        }
      ],
      // 是否显示多选框
      selectable: true,
      // 是否显示序号列
      sequence: true,
      editIds: []
    }
  },
  methods: {
    $_handleEdit(row) {
      // 通过调用 startEditRow 可以开启行编辑
      this.$refs.table.startEditRow(row.id)
      // 记录开启了行编辑的id
      this.editIds.push(row.id)
    },
    $_handleSave(row) {
      this.$refs.table.endEditRow(row.id, (valid, result, oldRow) => {
        if (valid) {
          console.log('修改之后的数据', result)
          console.log('原始数据', oldRow)
          const index = this.editIds.findIndex(item => item === row.id)
          this.editIds.splice(index, 1)
        } else {
          // 如果校验失败，则返回校验的第一个输入框的异常信息
          console.log(result)
          this.$message.error(result.message)
        }
      })
    }
  }
}

API

表格属性

参数	说明	类型	默认值
columns	表格列,详见字段属性说明	`Array<Object>`	`[]`
buttons	表格上方的按钮，详见按钮字符说明	`Array<Object>`	`[]`
pagination	是否启用分页	`Boolean`	`false`
pageSize	分页后每页条数	`Number`	`10`
total	分页后数据总条数	`Number`	`0`
currentPage	分页后当前页码	`Number`	`0`
selectable	表格是否显示复选框	`Boolean`	`true`
sequence	表格前是否显示序号列	`Boolean`	`false`
height	表格高度,只有在特定情况下使用	`Number \| String \| auto`

表格事件

表格除了以下事件外，可以使用element ui 表格组件的其他所有事件

事件名	说明	参数
page-change	用户修改分页条数，页码等触发	-
selection-change	用户修改复选框选中的行时触发	`selection`: 选中的行数据
current-change	用户点击行时触发	`current`: 点击的行数据
sort-change	在启用表头排序后排序状态发生变化触发	-

表格方法

方法名	说明	参数	返回值
startEditRow	开始行编辑	`index`: 编辑的行索引	-
endEditRow	结束行编辑	`callback(valid, data, rows)`: 回调函数， valid: 行编辑验证是否成功 data: 验证成功行编辑数据，失败时为失败原因 rows: 编辑的这一行的原始数据	-
isEditRow	当前表格是否正在行编辑	-	`result:Boolean`
cancelEditRow	取消行编辑	-	-
getSelectionRows	获取复选框选中的行	-	`rows:Array<row>`
getCurrentRow	获取点击行选中的行	-	`row:Object`
setCurrentRow	单行选中时设置选中的行	`row:Object`	-
getEditFieldValues	获取正在编辑的行的数据	-	`data:Object`
setEditFieldValues	设置正在编辑行的数据	`data:Object`	-
toggleRowSelection	启用复选后切换行的选中状态	`row: Object, select: Boolean`	-
doLayout	重新布局表格,当表格父容器由隐藏状态变为显示时，可能表格布局会错乱	-	-

内置插槽

插槽	说明	参数
column	表格列插槽，可以自定义表格列渲染方式	`{row,column,prop,cellValue,$index,field}` `field`为行编辑字段信息
header	自定义表格表头显示方式	`{label,prop,column, $index, field }`
button	自定义表头顶部按钮	`{button, selectedRow}` `selectedRow`为选中的表格行数据
toolbar	自定义顶部工具条, 工具条会放在左侧按钮与右侧搜索区域中间	-

列属性

列属性除以下属性外，elementui 列其他属性均可使用

参数	说明	类型	默认值
label	列名	`String`	-
prop	列属性	`String`	-
width	表头宽度	`Number`	-
sortable	是否排序列	`Boolean`	`false`
formatter	单个元格式化	`(row,column,cellValue):String`	-
nests	嵌套列	`Array<Column>`	-
events	单元格事件，见elementui单元格事件	`Object<Event>`	-
actions	操作列，详见操作列属性	`Array<Object>`	-
editable	是否可编辑行	`Boolean`	`false`
field	行编辑字符，详见行编辑字段属性	`Object`	-
beforeEdit	当前单元格开启编辑时调用，返回true则开启编辑	`(row,column,cellValue,index):Boolean`
useSlot	是否在当前列使用插槽，插槽名称为 `column`	`Boolean`	`false`
hidden	是否隐藏当前列	`Boolean\|Function`	`false`

表头按钮属性

表头按钮除以下属性外，elementui 按钮其他属性均可使用

参数	说明	类型	默认值
id	按钮唯一标识，必填	`String\|Number`	-
text	按钮显示文字	`String`	-
icon	按钮显示图标	`String`	-
click	点击按钮事件,传入选中的行数据	`(rows):void`	-

行操作按钮属性

参数	说明	类型	默认值
id	按钮唯一标识，必填	`String\|Number`	-
text	按钮冒泡显示的文字	`String`	-
icon	按钮图标，必填	`String`	-
before	按钮渲染前调用，返回false不渲染按钮	`(row,column,index):Boolean`	-
click	点击按钮事件	`(row,column,index):void`	-

vue-elementui-table

介绍

主要功能

待开发功能

常用命令

使用说明

基本表格

使用分页

使用顶部按钮与行操作按钮

按钮使用插槽

表格行编辑

API

表格属性

表格事件

表格方法

内置插槽

列属性

表头按钮属性

行操作按钮属性

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

vue-elementui-table

介绍

主要功能

待开发功能

常用命令

使用说明

基本表格

使用分页

使用顶部按钮与行操作按钮

按钮使用插槽

表格行编辑

API

表格属性

表格事件

表格方法

内置插槽

列属性

表头按钮属性

行操作按钮属性

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads