vue-excel-table

vue-excel-table可编辑的表格组件

适用于Vue的可编辑的表格组件，支持多种快捷键操作，模拟Excel的操作体验

截图

特性

• 表格宽度调整
• 表格列固定
• 数据筛选与排序
• 行多选
• 批量删除与复制粘贴
• 可与Excel互相复制粘贴
• 数据下拉复制
• 下拉复制与多选单元格时候表格可自动滚动
• 获取改变的数据行
• 多种数据类型校验
• 支持自定义规则数据校验
• 获取校验非法的数据行
• 支持撤销与重做
• 可自定义每个单元格样式与类名
• 使用局部渲染，支持更大量数据的展示
• 自定义禁止行的某些列值进行修改
• 单元格支持下拉多选情况
• 单元格支持点击回调函数情况

安装

npm install vue-excel-table --save

挂载

挂载在全局

import Vue from 'vue'
import vueExcelTable from 'vue-excel-table'

// require styles
import 'vue-excel-table/dist/vue-excel-table.min.css'

Vue.component('vueExcelTable', vueExcelTable)

挂载在组件

import vueExcelTable from 'vue-excel-table'

// require styles
import 'vue-excel-table/dist/vue-excel-table.min.css'

export default {
  components: {
    vueExcelTable
  }
}

使用例子

<template>
  <excel-table
    ref="excelTable"
    :columns="columns"
    v-model="data"
    maxHeight="800" />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 40,
          fixed: true,
        },
        {
          title: '序号',
          key: 'sid',
          fixed: true,
          type: 'number',
          width: 100,
        },
        {
          title: '姓名',
          key: 'name',
          fixed: true,
          width: 120,
        },
        {
          title: '日期',
          key: 'date',
          type: 'date',
          width: 100,
        },
        {
          title: '工作岗位',
          key: 'email',
          width: 300,
          type: 'select',
          options: [
            {
              value: 'Web前端开发',
              label: 'Web前端开发',
            },
            {
              value: 'Java开发',
              label: 'Java开发',
            },
            {
              value: 'Python开发',
              label: 'Python开发',
            },
            {
              value: 'Php开发',
              label: 'Php开发',
            },
          ],
        },
        {
          title: '触发CallBack()',
          key: 'bbb',
          fixed: true,
          type: 'Link',
          width: 120,
          banClearSelected: true, // 禁止清空
          banAutofill: false, // 禁止下拉/上拉复制
          focusCallBackFunction: (cb) => {
            // eslint-disable-next-line no-alert
            const r = window.confirm('弹出窗口确认提示!');
            if (r === true) {
              console.warn('type is Link 注意: 如果是传入对象, 则表格会重置历史数据 Ctr + Z 记录清楚,即用不了/  回调做了一个clickoutsize() 即消除焦点解决某些问题');
              cb({ bbb: '填入值aaa', name: '填入值广州羽阳' });
              // cb('字符串aaa');
            } else {
              cb();
            }
          },
        },
        {
          title: '多选组件',
          key: 'aaa',
          width: 300,
          type: 'multipleSelect',
          options: [{
            value: 'unLimit',
            label: '无限制',
          }, {
            value: 'allSelect',
            label: '全选指定品牌',
          }, {
            value: 'Bmw',
            label: '宝马',
          }, {
            value: 'Bm2w',
            label: '宝马2',
          }],
        },
        {
          title: '月份',
          key: 'month',
          type: 'month',
          width: 100,
        },
        {
          title: '地址',
          key: 'address',
          width: 200,
        },
        {
          title: '标题',
          key: 'title',
          width: 300,
        },
        {
          title: '内容',
          key: 'paragraph',
          width: 300,
        },
        {
          title: '链接',
          key: 'url',
          width: 200,
        },
        {
          title: 'ip',
          key: 'ip',
          width: 200,
          validate: (value) => {
            const pattern = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g;
            return pattern.test(value);
          },
        },
        {
          title: '总金额',
          key: 'sum',
          width: 200,
        },
        {
          title: 'ID',
          key: 'id',
          width: 200,
        },
        {
          title: '色值',
          key: 'color',
          width: 200,
        },
      ],
      data: [],
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const data = [];
      this.$refs.excelTable.setData(data);
    },
    autoDisableEditFunction4RowDataChanged(row) {
      return new Promise((reslove) => {
        if (row.email === '选项1') reslove([5, 6]);
        else reslove(false);
      });
    },
  },
};
</script>

数据

this.$refs.excelTable调用setData方法来更新整表数据，并会重置历史数据记录.

this.$refs.excelTable调用getData方法来获取整表数据.

v-model进行值的绑定

属性

参数	说明	类型	可选值	默认值
columns	表格列的配置描述	Array	——	[]
maxHeight	表格最大高度	string / number	——	——
rowHeight	每行高度	string / number	——	——
disabled	是否禁止编辑	Boolean	——	true
showIcon	是否显示表头类型图标	Boolean	——	false
cellStyle	单元格的 style 的回调方法	Function({row, column, rowIndex, columnIndex})	——	——
cellClassName	单元格的 className 的回调方法	Function({row, column, rowIndex, columnIndex})	——	——
disableRowEdit	当双击编辑选择项或选中项的值将被修改时触发该事件	Function(row)	promise.reslove(false)或promise.reslove([0,1,2....])	promise.reslove(false)
displaySelectLabel	是否展示select的label （原来展示select的value）	Boolean	——	false

事件

事件名称	说明	回调参数
selection-change	当选择项发生变化时会触发该事件	selection
editing	当编辑结束时候触发该事件，返回编辑状态和单次所修改的行数据	editState, changeData

方法

方法名	说明	参数
getData	用来获取数据，返回当前表格数据	——
setData	用来设置数据，并重置历史记录	data
getChangeData	获取变化的数据行	——
getErrorRows	获取校验错误的数据和索引	——
addItem	添加一行数据	item, type(默认'push',可选'unshift')
removeItems	批量删除，参数key为每行的唯一标识属性如id，values为该标识属性的数组	key, values
markCellError	标记单元格错误，可使单元格颜色变红同时行的颜色变黄, 同一单元格触发多次是标记和取消标记切换	sidName = 'sid'（用来判断找到行的唯一标识）, sids = ['1', '2', '3']（唯一标识数据）, colomnKey = ['name', 'date']（标记行里哪些列需要标记的key）
clearMarkCellError	主动清除某个错误单元格	sidName = 'sid', sids = ['1', '2', '3']
clearMarkCellErrorAll	清空标记错误单元格

列属性

参数	说明	类型	可选值	默认值
key	对应列内容的字段名	String	——	——
title	列头显示文字	String	——	——
width	列宽度	String / Number	——	——
type	列类型	String	selection/number/date/select/month/Link/multipleSelect	——
format	千分号格式（用于number类型）	Boolean	——	true
options	select下拉选项	Array	{ value: '值', label: '显示文字' }	——
fixed	是否固定在左侧	Boolean	——	false
action	是否启用筛选和排序	Boolean	——	false
disabled	是否禁止编辑	Boolean	——	false
noVerify	是否禁用校验	Boolean	——	false
validate	自定义校验	Function(value)	——	——
banClearSelected	禁止清空	Boolean	——	——
banAutofill	禁止下拉或上拉复制	Boolean	——	——
focusCallBackFunction	Link类型单元格时候生效，必填。功能是点击触发回调函数	Function(callback)	——	——

快捷键

快捷键	说明
方向键	移动编辑框
Ctrl + C	粘贴
Ctrl + V	复制
Ctrl + A	单元格全选
Ctrl + Z	撤销
Ctrl + Y	重做
Enter	单元格编辑/完成单元格编辑
Delete、Backspace	删除

// TODO security vulnerabilities

Release History

Version	Changes
---	新增Link 点击调用回调函数单元格类型
---	新增下拉多选组件
3.1.2	修复displaySelectLabel时候 select的title
3.1.1	展示select的label
3.1.0	关闭时取消键盘和鼠标事件监听