fast_zhhx_table v0.3.27

comment: <> (# vue-willtable可编辑的表格组件)

comment: <> (Demo here: https://demo.willwuwei.com/willtable/)

comment: <> (## 截图)

comment: <> ((https://qiniu.willwuwei.com/willtable1.gif))

comment: <> ((https://qiniu.willwuwei.com/willtable2.gif))

comment: <> (## 特性)

comment: <> (- 表格宽度调整)

comment: <> (- 表格列固定)

comment: <> (- 数据筛选与排序)

comment: <> (- 行多选)

comment: <> (- 批量删除与复制粘贴)

comment: <> (- 可与Excel互相复制粘贴)

comment: <> (- 数据下拉复制)

comment: <> (- 下拉复制与多选单元格时候表格可自动滚动)

comment: <> (- 获取改变的数据行)

comment: <> (- 多种数据类型校验)

comment: <> (- 支持自定义规则数据校验)

comment: <> (- 获取校验非法的数据行)

comment: <> (- 支持撤销与重做)

comment: <> (- 可自定义每个单元格样式与类名)

comment: <> (- 使用局部渲染，支持更大量数据的展示)

comment: <> (## 安装)

comment: <> (`)

comment: <> (npm install vue-willtable --save)

comment: <> (`)

comment: <> (## 挂载)

comment: <> (### 挂载在全局)

comment: <> (` javascript)

comment: <> (import Vue from 'vue')

comment: <> (import VueWilltable from 'vue-willtable')

comment: <> (// require styles)

comment: <> (import 'vue-willtable/dist/vue-willtable.min.css')

comment: <> (Vue.component('VueWilltable', VueWilltable))

comment: <> (`)

comment: <> (### 挂载在组件)

comment: <> (` javascript)

comment: <> (import VueWilltable from 'vue-willtable')

comment: <> (// require styles)

comment: <> (import 'vue-willtable/dist/vue-willtable.min.css')

comment: <> (export default {)

comment: <> ( components: {)

comment: <> ( VueWilltable)

comment: <> ( })

comment: <> (})

comment: <> (`)

comment: <> (## 使用例子)

comment: <> (`js)

comment: <> ()

comment: <> ( <willtable)

comment: <> ( ref="willtable")

comment: <> ( :columns="columns")

comment: <> ( v-model="data")

comment: <> ( maxHeight="800" />)

comment: <> ()

comment: <> ()

comment: <> (export default {)

comment: <> ( data() {)

comment: <> ( return {)

comment: <> ( columns: [)

comment: <> ( {)

comment: <> ( type: 'selection',)

comment: <> ( width: 40,)

comment: <> ( fixed: true,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '序号',)

comment: <> ( key: 'sid',)

comment: <> ( fixed: true,)

comment: <> ( type: 'number',)

comment: <> ( width: 100,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '姓名',)

comment: <> ( key: 'name',)

comment: <> ( fixed: true,)

comment: <> ( width: 120,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '日期',)

comment: <> ( key: 'date',)

comment: <> ( type: 'date',)

comment: <> ( width: 100,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '工作岗位',)

comment: <> ( key: 'email',)

comment: <> ( width: 300,)

comment: <> ( type: 'select',)

comment: <> ( options: [)

comment: <> ( {)

comment: <> ( value: 'Web前端开发',)

comment: <> ( label: 'Web前端开发',)

comment: <> ( },)

comment: <> ( {)

comment: <> ( value: 'Java开发',)

comment: <> ( label: 'Java开发',)

comment: <> ( },)

comment: <> ( {)

comment: <> ( value: 'Python开发',)

comment: <> ( label: 'Python开发',)

comment: <> ( },)

comment: <> ( {)

comment: <> ( value: 'Php开发',)

comment: <> ( label: 'Php开发',)

comment: <> ( },)

comment: <> ( ],)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '月份',)

comment: <> ( key: 'month',)

comment: <> ( type: 'month',)

comment: <> ( width: 100,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '地址',)

comment: <> ( key: 'address',)

comment: <> ( width: 200,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '标题',)

comment: <> ( key: 'title',)

comment: <> ( width: 300,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '内容',)

comment: <> ( key: 'paragraph',)

comment: <> ( width: 300,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '链接',)

comment: <> ( key: 'url',)

comment: <> ( width: 200,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: 'ip',)

comment: <> ( key: 'ip',)

comment: <> ( width: 200,)

comment: <> ( validate: (value) => {)

comment: <> ( const pattern = /((2(50-5|0-4\d))|0-1?\d{1,2})(.((2(50-5|0-4\d))|0-1?\d{1,2})){3}/g;)

comment: <> ( return pattern.test(value);)

comment: <> ( },)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '总金额',)

comment: <> ( key: 'sum',)

comment: <> ( width: 200,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: 'ID',)

comment: <> ( key: 'id',)

comment: <> ( width: 200,)

comment: <> ( },)

comment: <> ( {)

comment: <> ( title: '色值',)

comment: <> ( key: 'color',)

comment: <> ( width: 200,)

comment: <> ( },)

comment: <> ( ],)

comment: <> ( data: [],)

comment: <> ( },)

comment: <> ( },)

comment: <> ( mounted() {)

comment: <> ( this.getData();)

comment: <> ( },)

comment: <> ( methods: {)

comment: <> ( getData() {)

comment: <> ( const data = [];)

comment: <> ( this.$refs.willtable.setData(data);)

comment: <> ( },)

comment: <> ( },)

comment: <> (};)

comment: <> ()

comment: <> (`)

comment: <> (### 数据)

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

comment: <> (this.$refs.willtable调用getData方法来获取整表数据.)

comment: <> (v-model进行值的绑定)

comment: <> (### 属性)

comment: <> (| 参数 | 说明 | 类型 | 可选值 | 默认值 |)

comment: <> (| ------------- | ----------------------------- | --------------------------------------------------------- | ------ | ----------- |)

comment: <> (| columns | 表格列的配置描述 | Array | —— | [] |)

comment: <> (| maxHeight | 表格最大高度 | string / number | —— | —— |)

comment: <> (| rowHeight | 每行高度 | string / number | —— | —— |)

comment: <> (| disabled | 禁止编辑 | Boolean | —— | true |)

comment: <> (| showIcon | 显示表头类型图标 | Boolean | —— | false |)

comment: <> (| cellStyle | 单元格的 style 的回调方法 | Function({row, column, rowIndex, columnIndex}) | —— | —— |)

comment: <> (| cellClassName | 单元格的 className 的回调方法 | Function({row, column, rowIndex, columnIndex}) | —— | —— |)

comment: <> (| disabledCell | 禁用单元格 | Function({row, column, rowIndex, columnIndex}) => Boolean | —— | () => false |)

comment: <> (| showAddRow | 显示添加行功能 | Boolean | —— | false |)

comment: <> (| addRowAndCopy | 添加行时复制上一行数据 | Boolean | —— | false |)

comment: <> (### 事件)

comment: <> (| 事件名称 | 说明 | 回调参数 |)

comment: <> (| ---------------- | ------------------------------ | --------- |)

comment: <> (| selection-change | 当选择项发生变化时会触发该事件 | selection |)

comment: <> (### 方法)

comment: <> (| 方法名 | 说明 | 参数 |)

comment: <> (| -------------- | ------------------------------------------------------------ | ----------------------------- |)

comment: <> (| getData | 用来获取数据，返回当前表格数据 | —— |)

comment: <> (| setData | 用来设置数据，并重置历史记录 | data |)

comment: <> (| getChangeData | 获取变化的数据行 | —— |)

comment: <> (| getErrorRows | 获取校验错误的数据和索引 | —— |)

comment: <> (| addItem | 底部添加一行数据 | item |)

comment: <> (| addRow | 添加行 | rowIndex, copyRow, customData |)

comment: <> (| removeItems | 批量删除，参数key为每行的唯一标识属性如id，values为该标识属性的数组 | key, values |)

comment: <> (| setCellData | 设置单元格数据 | rowIndex, columnIndex, value |)

comment: <> (| fullscreen | 全屏展示 | —— |)

comment: <> (| exitFullscreen | 退出全屏 | —— |)

comment: <> (### 列属性)

comment: <> (| 参数 | 说明 | 类型 | 可选值 | 默认值 |)

comment: <> (| ----------- | ---------------------------- | ------------------------------------------------------- | ---------------------------------- | ------ |)

comment: <> (| key | 对应列内容的字段名 | String | —— | —— |)

comment: <> (| title | 列头显示文字 | String | —— | —— |)

comment: <> (| width | 列宽度 | String / Number | —— | —— |)

comment: <> (| type | 列类型 | String | selection/number/date/select/month | —— |)

comment: <> (| format | 千分号格式（用于number类型） | Boolean | —— | true |)

comment: <> (| options | select下拉选项 | Array | { value: '值', label: '显示文字' } | —— |)

comment: <> (| fixed | 是否固定在左侧 | Boolean | —— | false |)

comment: <> (| action | 是否启用筛选和排序 | Boolean | —— | false |)

comment: <> (| disabled | 是否禁止编辑 | Boolean | —— | false |)

comment: <> (| noVerify | 是否禁用校验 | Boolean | —— | false |)

comment: <> (| validate | 自定义校验 | Function(value) | —— | —— |)

comment: <> (| customInput | 自定义输入 | Function({ row, column, rowIndex, columnIndex, value }) | —— | —— |)

comment: <> (### 快捷键)

comment: <> (| 快捷键 | 说明 |)

comment: <> (| ----------------- | ------------------------- |)

comment: <> (| 方向键 | 移动编辑框 |)

comment: <> (| Ctrl + C | 粘贴 |)

comment: <> (| Ctrl + V | 复制 |)

comment: <> (| Ctrl + A | 单元格全选 |)

comment: <> (| Ctrl + Z | 撤销 |)

comment: <> (| Ctrl + Y | 重做 |)

comment: <> (| Enter | 单元格编辑/完成单元格编辑 |)

comment: <> (| Delete、Backspace | 删除 |)

comment: <> (## 作者)

comment: <> (WillWu(https://www.willwuwei.com))