vue-excel-table v3.1.28

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进行值的绑定

属性

事件

方法

列属性

快捷键

// TODO security vulnerabilities

Release History