您现在的位置是：网站首页> 编程资料编程资料

hansontable在vue中的基本使用教程_vue.js_

2023-05-24 320人已围观

简介 hansontable在vue中的基本使用教程_vue.js_

简介

Vue Handsontable是一个具有Spreadsheet外观的Vue数据表格组件,是Handsontable的官方封装。 Handsontable易于与任何数据源集成，并具有许多有用的功能，如数据绑定、验证、排序和强大的上下文菜单。

特点

多列排序
非连续选择
过滤数据
导出文件
验证数据
条件格式
合并单元格
自定义单元格类型
冻结行/列
移动行/列
调整大小行/列
隐藏行/列
上下文菜单
注释
自动填充选项

handsontable是目前在前端界最接近excel的插件，可以执行编辑，复制粘贴，插入删除行列，排序等复杂操作

代码

Test.vue

hotSettings.js

import Handsontable from 'handsontable' Handsontable.renderers.registerRenderer( 'negativeValueRenderer', negativeValueRenderer ) function negativeValueRenderer( instance, td, row, col, prop, value, cellProperties ) { Handsontable.renderers.TextRenderer.apply(this, arguments) // 示例1:如果单元格的值小于10，则添加类名 if (parseInt(value, 10) < 0) { td.className = 'make-me-red' } // 如果单元格的值为空或者没值 if (!value || value === '') { td.style.background = '#EEE' } else { if (value === 'Nissan') { td.style.fontStyle = 'italic' } td.style.background = '' } } function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) { Handsontable.renderers.TextRenderer.apply(this, arguments) td.style.fontWeight = 'bold' td.style.color = 'green' td.style.background = 'orange' } const hotSetting = { licenseKey: 'non-commercial-and-evaluation', // colHeaders: true, // 列合并 // 注意：在第一列的表头是不能合并的 // nestedHeaders: [ // ['Car', { label: 'Year', colspan: 5 }, 'Chassis color', 'Bumper color'], // [ // 'Country', // { label: 'City', colspan: 3 }, // 'Address', // 'Zip code', // 'MobileH', // ], // ], // 列名 colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'], // rowHeaders: true, rowHeights: 40, width: '100%', // height: 'auto', height: 400, // 是否可以手动调整列大小 manualColumnResize: true, // 将所有的列平均拉伸到父容器的宽度 stretchH: 'all', // 右键下拉菜单 // dropdownMenu: true, filters: true, dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'], // 列排序 columnSorting: true, // 单元格的合并 mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 2 }], // 设置单元格的水平和垂直居中，并为表格添加自定义的类名 className: 'htCenter htMiddle custom-table', // 单元格样式设置 cells(row, col) { const cellProperties = {} // 对第一行设置样式，注意：不包括表头 // 方式1： 直接通过函数 // 方式2： 字符串，通过hansontable的map映射使用渲染器 if (row === 0) { cellProperties.renderer = firstRowRenderer // uses function directly } else { cellProperties.renderer = 'negativeValueRenderer' } return cellProperties }, // 是否只读 // readOnly: true, } export default hotSetting