申明

.[基于 handsontable 二次封装源码]: https://github.com/hf0913/vue-handsontable-element .[handsontable 官网]: https://handsontable.com/

简要步骤

1. 原表格标签修改为：Handsontable
2. 对于 columns，key 或者 data 属性名都可以用来存放后端字段名
3. 对于 columns 中 type 属性，仅支持：autocomplete、checkbox、date、dropdown、handsontable、numeric、password、text、time，默认为 text，切记不要设置 type 类型为其他值

示例代码

1<template>
2    <Handsontable
3        :selectBoxConfig="selectBoxConfig"
4        :columns="columns"
5        v-model="tableData"
6        @click="handsontableClick"
7        @change="handsontableChange"
8        @getCore="getCore"
9        @cellDblClick="cellDblClick"
10        @getSelectOpts="getSelectOpts"
11        @changeSort="changeSort"
12        :options="options"
13        :singleSelectConfig="singleSelectConfig"
14        ref="handsontableRef"
15        :showLastTotalText="showLastTotalText"
16    />
17</template>
18
19<script>
20    export default {
21        data() {
22            return {
23                showLastTotalText: true, // "当第一列type为checkbox类型，控制最后一行是否展示合计"
24                selectArr: [
25                    {
26                        test: "maple1",
27                        id: 1
28                    }
29                ], // 下拉框数据集合
30                tableData: [],
31                columns: [
32                    {
33                        //公共属性解释
34                        title: "表头名", // 表格表头名
35                        key: "common", // 表格渲染字段名，可以支持data或者key属性名
36                        _width: 200, // 表格宽度
37                        readOnly: true, // 是否只读，控制单元格是否支持下拉填充、粘贴赋值，true开启，false关闭，默认false
38                        allowEmpty: false, // 是否必填，false必填，true非必填，默认text，同type属性
39                        type: "checkbox", // 模式类型，仅支持：text（文本）、checkbox（复选框）、numeric（数字）、date（日期）、time（时间）、dropdown（下拉框），autocomplete（懒加载下拉框，相比dropdown不会自动填充值），默认text
40                        subType: "selection", // 扩展模式类型，仅支持：selection（表头复选框）、address（地址级联选择器）、cascader（普通级联选择器）、datePicker（日期时间选择器）、posInt（正整数类型）、optimize（下拉框优化模式）、handle（操作）
41                        editor: false, // 是否可以编辑，false不可以编辑，但是可以被下拉填充或者粘贴，仅支持：text（文本）、checkbox（复选框）、numeric（数字）、date（日期）、time（时间）、dropdown（下拉框），false
42                        validator: (value, callback) => {
43                            // 自定义校验，value为单元格值，callback回调函数，入参为boolean类型。
44                            callback(true); // true校验通过,false校验失败，单元格背景色标记红色
45                        },
46                        className: "htLeft htMiddle", // 对齐方式，仅支持：htRight htLeft htMiddle htBottom
47                        filterable: true, // 是否关闭过滤
48                    },
49                    {
50                        title: "普通复选框",
51                        key: "checked",
52                        type: "checkbox",
53                        checkedTemplate: "1", // true翻译成字符串1
54                        uncheckedTemplate: "0" // false翻译成字符串0
55                    },
56                    {
57                        key: "checked",
58                        type: "checkbox",
59                        subType: "selection" // 表头复选框
60                    },
61                    {
62                        title: "普通文本",
63                        key: "text",
64                        maxLength: 8 // 文字最大长度
65                    },
66                    {
67                        title: "地址级联选择",
68                        data: "address",
69                        subType: "address",
70                        exchange: false, // 键值对都有值，不会转化，默认都会转化
71                        extraField: "maple_address", // 额外多返回一个字段，该值由valueType属性控制
72                        valueType: "label", // label || value，默认value
73                        asyncOpts: () => {
74                            // 移步赋值options
75                            return new Promiss((resolve, reject) => {
76                                resolve([]);
77                            });
78                        },
79                        props: {} // 参考 https://element.eleme.cn/#/zh-CN/component/cascader
80                    },
81                    {
82                        title: "普通级联选择",
83                        data: "cascader",
84                        exchange: false, // 键值对都有值，不会转化，默认都会转化
85                        subType: "cascader",
86                        asyncOpts: () => {
87                            // 移步赋值options
88                            return new Promiss((resolve, reject) => {
89                                resolve([]);
90                            });
91                        },
92                        options: [], // 也接受function,如：options: ({row, col}) => []
93                        extraField: "maple_address", // 额外多返回一个字段，该值由valueType属性控制
94                        valueType: "label", // label || value，默认value
95                        props: {} // 参考 https://element.eleme.cn/#/zh-CN/component/cascader
96                    },
97                    {
98                        title: "时间日期组合",
99                        key: "datePicker",
100                        subType: "datePicker",
101                        props: {
102                            // 参考 https://element.eleme.cn/#/zh-CN/component/datetime-picker
103                            type: "datetime",
104                            format: "yyyy-MM-dd HH:mm:ss",
105                            valueFormat: "yyyy-MM-dd HH:mm:ss"
106                        }
107                    },
108                    {
109                        title: "数字",
110                        data: "numeric",
111                        type: "numeric",
112                        subType: "posInt", // 正整数类型
113                        allowZero: true, // subType为"posInt"时，是否允许赋值为0
114                        numericFormat: {
115                            pattern: "0.00", // 显示值类型
116                            min: 0, // 最小值
117                            max: 1208, // 最大值
118                            minInclude: false, // 是否包含最小值，默认true
119                            maxInclude: false, // 是否包含最大值，默认true
120                        }
121                    },
122                    {
123                        title: "日期",
124                        data: "date",
125                        type: "date",
126                        dateFormat: "YYYY-MM-DD" // 日期类型
127                    },
128                    {
129                        title: "时间",
130                        data: "time",
131                        type: "time",
132                        timeFormat: "HH:mm", // 时间类型
133                        correctFormat: true // 失去焦点，矫正时间格式
134                    },
135                    {
136                        title:
137                            "下拉框(优化模式，options属性或者source属性，接受一个回调函数，返回数据字典集合)",
138                        data: "select",
139                        type: "autocomplete",
140                        // options: () => this.selectArr, // 这种也可以哦，下拉框选项值字段名支持：source || options
141                        options: () => this.selectArr, // 存放下拉框选项值集合，每一项中包含值和id，取名source或者options都可以
142                        // extraField属性：调用getData方法，返回多余字段名，其值取item[valueType === valueName ? labelName : valueName]
143                        extraField: "maple_love",
144                        valueType: "id", // 配合extraField属性使用，默认等于valueName
145                        labelName: "test", // 下拉框选项值集合，每一项中值字段名，默认：label，即用户可以看到下拉框列表显示的值
146                        valueName: "id", // 下拉框选项值集合，每一项中id字段名，默认：value，即发送给后台的值，用户是看不到这个值
147                        subType: "optimize", // 优化模式，配合maxMatchLen属性一起使用，必须滴
148                        maxMatchLen: 8, // 根据source属性值，模糊匹配最大条数，默认8条，即用户点击下拉框只可以选择8条数据。
149                        visibleRows: 4, // 可见列表数量
150                        exchange: false, // 键值对都有值，不会转化，默认都会转化
151                        mnemonicCode: ["shorthandCode"] // 助记符
152                    },
153                    {
154                        title: "下拉框（ajax远程搜索）",
155                        data: "select-maple",
156                        subType: "select",
157                        options: [
158                            {
159                                unitId: 1,
160                                unitName: "maple1",
161                                test: "ok"
162                            },
163                            {
164                                unitId: 2,
165                                unitName: "mtt1",
166                                test: "tt"
167                            }
168                        ],
169                        _width: 200,
170                        mnemonicCode: ["test"],
171                        extraField: "maple_select",
172                        valueType: "unitId", // 配合extraField属性使用，默认等于valueName
173                        labelName: "unitName", // 下拉框选项值集合，每一项中值字段名，默认：label，即用户可以看到下拉框列表显示的值
174                        valueName: "unitId", // 下拉框选项值集合，每一项中id字段名，默认：value，即发送给后台的值，用户是看不到这个值
175                        asyncOpts: () => {
176                            // 移步赋值options
177                            return new Promiss((resolve, reject) => {
178                                resolve([]);
179                            });
180                        },
181                        ajaxConfig: {
182                            // ajax请求配置
183                            url:
184                                "http://47.110.56.139:8008/api/foundation/unit/component", // 请求后端的完整地址，切记不能携带任何请求参数。
185                            method: "post", // 请求方式
186                            queryField: "param", // 查询字段名，动态获取查询值value
187                            data: {
188                                // 请求参数以body形式发送，如果不需要请设置data属性。接受函数，如：data:()=>({param: ''})
189                                pageNum: 1,
190                                pageSize: 10,
191                                param: ""
192                            },
193                            header: {
194                                // 接受function，举例：header:()=>({Authorization: "eyJhbGciOiJIUzUxMiJ9"})
195                                Authorization: "eyJhbGciOiJIUzUxMiJ9"
196                            },
197                            // param:{param: ''} // 请求参数从url携带发送，查询参数，场景业务场景如get请求, 接受函数，如：param:()=>({param: ''})
198                            result: "data" // 根据后端返回关于下拉框选项集合的数据结构，给出一个字段访问链。必须滴。
199                        },
200                        props: {
201                            remote: true, // 是否开启远程搜索
202                            placeholder: "输入即搜索"
203                        } // 参考 https://element.eleme.cn/#/zh-CN/component/cascader
204                    },
205                    {
206                        title: "操作",
207                        subType: "handle",
208                        _width: 140,
209                        options: [
210                            {
211                                name: "复制", // 文本标题
212                                color: "#409eff" // 文本颜色
213                            },
214                            {
215                                name: "添加",
216                                color: "#67c23a"
217                            },
218                            {
219                                name: "删除",
220                                color: "#f56c6c"
221                            }
222                        ]
223                    }
224                ],
225                options: {
226                    // 更多options，https://handsontable.com/docs/7.4.2/Options.html
227                    maxRows: 12080, // 数据上限
228                    minRows: 8, // 至少8条，如果设置该属性，请删除与之冲突的补偿数据的代码。
229                    height: 400,
230                    readOnly: false, // table是否只读
231                    columnSorting: true, // 开启排序
232                    wordWrap: false, // 不换行
233                    cacheId: "inventoryPricingMainTable", // 拖拽缓存唯一标记
234                    openCache: false, // 是否开启拖拽缓存
235                    nestedHeaders: [
236                        // 合并表头
237                        ["A", { label: "B", colspan: 8 }, "C"],
238                        [
239                            "D",
240                            { label: "E", colspan: 4 },
241                            { label: "F", colspan: 4 },
242                            "G"
243                        ],
244                        [
245                            "H",
246                            { label: "I", colspan: 2 },
247                            { label: "J", colspan: 2 },
248                            { label: "K", colspan: 2 },
249                            { label: "L", colspan: 2 },
250                            "M"
251                        ],
252                        ["N", "O", "P", "Q", "R", "S", "T", "U", "V", "W"]
253                    ],
254                    cells: (row, column, prop) => {
255                        // 控制一个或多个单元格属性
256                        // row:行号, column:列号, prop:字段名
257                        const cellProperties = {};
258
259                        if (row === this.myValue.length - 1) {
260                            // 行号等于最后一行
261                            cellProperties.readOnly = true; // 单元格只读
262                            cellProperties.comment = {
263                                // 单元格备注
264                                value: "备注内容", // 单元格备注内容
265                                readOnly: true // 备注内容只读
266                            };
267                        }
268                        if (row === this.core.countRows() - 1) {
269                            cellProperties.editor = false;
270                        } // 专为表尾合计用，如果使用了表尾合计，请一定要加上此段代码
271                        return cellProperties;
272                    },
273                    columnSummary: [
274                        // 表尾合计
275                        {
276                            key: "n1", // 需要统计某列的字段名
277                            type: "sum" // 目前暂时仅支持sum类型（求和）
278                        },
279                        {
280                            key: "n2",
281                            type: "sum"
282                        }
283                    ],
284                    openEmptyValid: true, // 是否开启空行校验，默认开启
285                    hasDefaultValFileds: ["字段一", "字段二"], // 是否存在默认值的字段集合，在getData数据校验空行会综合考虑是否标记单元格红色，如果默认字段有值且符合单元格校验规则，则被视为空单元格
286                    openSort: true, // 开启排序
287                    customSort: true, // 允许启用内部排序方法
288                    allowFilters: true, // 允许启用内部过滤方法
289                    multiColumnSorting: true, // 开启排序
290                    multiColumnSorting: {
291                        // 排序配置
292                        initialConfig: [
293                            {
294                                column: 1,
295                                sortOrder: "asc" // 正序
296                            },
297                            {
298                                column: 0,
299                                sortOrder: "desc" // 反序
300                            }
301                        ]
302                    },
303                    customValidate: ({ isValid, value, row, key }) => {
304                        // 全局自定义校验回调函数
305                        // isValid：当前单元格校验状态,value：当前单元格值,row：当前单元格行号,key：当前单元格字段名
306                        return true; // true即校验通过，false即校验失败
307                    },
308                    customCellDblClick: ({ row, col, $el, core }) => {
309                        // 自定义双击单元格回调函数
310                        // row：行号，col：列号，$el：当前单元格dom
311                        return true; // true即通过，false即阻止
312                    },
313                    takeoverCheckAll: o => {
314                        // 全选回调
315                    }
316                },
317                core: Object, // https://handsontable.com/docs/7.4.2/Core.html
318                selectBoxConfig: {
319                    // 表头中全选checkBox辅助配置，没有配置该属性，change事件返回的checked属性值为空
320                    key: "checkbox", // 复选框字段名
321                    col: 0 // 复选框行号
322                },
323                singleSelectConfig: {
324                    // 单选配置，通过change事件去监听checked的返回值，单选checked属性返回当前选择的数据集合
325                    key: "checked", // 字段名
326                    openAbled: false // 是否开启单选，默认关闭
327                    strict: false // 严格单选模式，开启将无法取消选择操作
328                }
329            };
330        },
331        methods: {
332            getCore(v) {
333                // 获取core
334                this.core = v;
335            },
336            handsontableChange(o) {
337                // change事件，通用模版
338                // getKeyChange, filterKeysChanges方法二选一，个人建议filterKeysChanges方法，第三个参数是否过滤监听合计一行数据变化，默认是true，即过滤
339                // row：行号 key：字段名 oldVal：旧值 newVal：新值 changes：单元格数据修改的集合
340                // changeCurrentCell 修改当前监听的单元格值
341                // filterSummaryRow: 过滤监听合计一行的数据变化，默认是true，即过滤
342                // checked：勾选数据集合，复选框触发
343                const {
344                    getKeyChange,
345                    filterKeysChanges,
346                    changes = [[]],
347                    changeCurrentCell,
348                    checked
349                } = o;
350
351                getKeyChange("你需要监听的字段名1", changes, true).map(
352                    ([row, key, oldVal, newVal]) => {
353                        console.log(row, key, oldVal, newVal);
354                    }
355                );
356                getKeyChange("你需要监听的字段名2", changes, true).map(
357                    ([row, key, oldVal, newVal]) => {
358                        console.log(row, key, oldVal, newVal);
359                    }
360                );
361
362                filterKeysChanges({
363                    filterSummaryRow: true, // 过滤监听合计一行的数据变化，默认是false，即过滤
364                    changes,
365                    keys: ["你需要监听的字段名1", "你需要监听的字段名2"],
366                    callback: ({
367                        row,
368                        key,
369                        oldVal,
370                        newVal,
371                        changeCurrentCell,
372                        index
373                    }) => {
374                        console.log(row, key, oldVal, newVal, index);
375                        // changeCurrentCell[3] = 'maple test'
376                    }
377                });
378            },
379            handsontableClick(o) {
380                console.log(o, "点击事件");
381            },
382            /**
383             * @description getData方法是一个promise，该方法会去遍历table数据，在遍历到每一个item，都会触发一个回调函数，该回调函数会提供两个参数（item,index），并接受一个对象，该对象会被浅合并到当前item。
384             */
385            getData() {
386                // 如果不需要任何校验，可以不需要调用该函数
387                this.$refs.handsontableRef
388                    .getData((item, index) => {
389                        item = {
390                            ...item,
391                            notAddabled: false, // 是否不添加当前item数据，false即添加，true即不添加
392                            maple: index // 基于item合并新属性
393                        };
394                        return item;
395                    })
396                    .then(({ value, valid, columns }) => {
397                        // valid 校验状态，true即通过
398                        console.log(value, valid, columns);
399                    });
400            },
401            /**
402             * @description  单元格双击事件
403             */
404            cellDblClick({ coord, mouseEvent, $el }) {
405                console.log(coord, mouseEvent, $el);
406            },
407            /**
408             * @description  获取下拉框列表变化
409             */
410            getSelectOpts(o) {
411                console.log("getSelectOpts", o);
412            },
413            utils() {
414                // 工具方法 https://github.com/hf0913/vue-handsontable-element/blob/master/src/utils/index.js
415                return utils;
416            },
417            changeSort(o) {
418                // 排序回调
419                this.$emit("changeSort", o);
420            },
421            clearSort(t) {
422                // 清空排序
423                return this.$refs.mapleHandsontableRef.clearSort();
424            },
425            changeCheckAllabled(bl) {
426                // 表格全选赋值
427                return this.$refs.changeCheckAllabled(bl);
428            }
429        }
430    };
431</script>
432
433#### 使用说明 1. 关于下拉框，建议使用【title: "下拉框(优化模式，options 属性或者
434source 属性，接受一个回调函数，返回数据字典集合)"】这种类型 2.
435获取某一个单元格值：this.core.getDataAtCell(row,col) 3.
436获取某一行数据：this.core.getDataAtRow(row) 4.
437获取某一列数据：this.core.getDataAtCol(col) 5.
438折叠行，https://handsontable.com/docs/7.4.2/demo-nested-rows.html 6.
439设置某一个单元格的值：this.core.setDataAtCell(row, col, value,
440'标记')，强烈不建议用在批量修改数据 7. 关于 core 获取，可以通过@getCore
441方法，查看上面的示例代码，change 方法和 click 方法也会返回 core 对象 8. 请勿使用
442setTimeout 来达到视图层更新 9. 修改数据，如果视图没有响应式渲染，请调用
443this.core.updateSettings({data: this.tableData}); ##### 注意事项
444全局修改该组件样式，会影响严重组件布局与功能，切记～