/vue-willtable

An editable table component for Vue.js 2.0

Primary LanguageVueMIT LicenseMIT

vue-willtable可编辑的表格组件

English document

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

Demo here: https://demo.willwuwei.com/willtable/

基于该组件实现的多人实时共享编辑表格系统:

访问网址

前端项目地址

后端项目地址

截图

image

image

特性

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

安装

npm install vue-willtable --save

挂载

挂载在全局

import Vue from 'vue'
import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

Vue.component('VueWilltable', VueWilltable)

挂载在组件

import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

export default {
  components: {
    VueWilltable
  }
}

使用例子

<template>
  <willtable
    ref="willtable"
    :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: '月份',
          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.willtable.setData(data);
    },
  },
};
</script>

数据

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

this.$refs.willtable调用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}) —— ——
disabledCell 禁用单元格 Function({row, column, rowIndex, columnIndex}) => Boolean —— () => false
showAddRow 显示添加行功能 Boolean —— false
addRowAndCopy 添加行时复制上一行数据 Boolean —— false

事件

事件名称 说明 回调参数
selection-change 当选择项发生变化时会触发该事件 selection

方法

方法名 说明 参数
getData 用来获取数据，返回当前表格数据 ——
setData 用来设置数据，并重置历史记录 data
getChangeData 获取变化的数据行 ——
getErrorRows 获取校验错误的数据和索引 ——
addItem 底部添加一行数据 item
addRow 添加行 rowIndex, copyRow, customData
removeItems 批量删除，参数key为每行的唯一标识属性如id，values为该标识属性的数组 key, values
setCellData 设置单元格数据 rowIndex, columnIndex, value
fullscreen 全屏展示 ——
exitFullscreen 退出全屏 ——

列属性

参数 说明 类型 可选值 默认值
key 对应列内容的字段名 String —— ——
title 列头显示文字 String —— ——
width 列宽度 String / Number —— ——
type 列类型 String selection/number/date/select/month ——
format 千分号格式（用于number类型） Boolean —— true
options select下拉选项 Array { value: '值', label: '显示文字' } ——
fixed 是否固定在左侧 Boolean —— false
action 是否启用筛选和排序 Boolean —— false
disabled 是否禁止编辑 Boolean —— false
noVerify 是否禁用校验 Boolean —— false
validate 自定义校验 Function(value) —— ——
customInput 自定义输入 Function({ row, column, rowIndex, columnIndex, value }) —— ——

快捷键

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

作者

WillWu