hansontable基础（一）

最新推荐文章于 2024-01-09 08:37:46 发布

Where-to-go

最新推荐文章于 2024-01-09 08:37:46 发布

阅读量1.8k

点赞数 1

文章标签： hansontable 前端开发在线excel表格

本文链接：https://blog.csdn.net/weixin_45523183/article/details/102872273

版权

hansontable基础之属性使用（vue）

导入组件（先要NPM安装）

import { HotTable } from "@handsontable/vue";
import Handsontable from "handsontable";

注册组件

  components: {  HotTable  }

使用hot-table组件

<HotTable :root="text" ref="textHot" :settings="hotSettings" :language="language"></HotTable>

设置hansontable属性

export default {
	 data() {
 		 return {
			   hotSettings: {
     			   data: 设置数据，
     			   width: 100, // 定义表格宽高
    			   height: 50，
     			｝
     	｝
    ｝
｝

属性名称（在settings中设置）	作用
data	设置每一行的数据（用数组表示【【第一行】，【第二行】，【第三行】】）
width	设置表格宽高
height
colWidths:	设置行高列宽（可以是数组）
rowHeights
className	设置文字位置（htCenter，htLeft，htRight，htJustify，htTop，htMiddle，htBottom）
colHeaders: true	列列标题是否显示
rowHeaders: true
startRows: 19	起始表格大小
startCols: 6
minRows	最小行列
minCols
maxRows: 50	最大行列
maxCols: 50
minSpareCols: 1	行列空白大小
minSpareRows: 5
autoWrapRow	自动换行
columnSorting	排序
fixedColumnsLeft: 0	固定行列数(标题除外)
fixedRowsTop: 6,
mergeCells:	合并单元格，语法：{ “row”: 0, “col”: 0, “rowspan”: 1, “colspan”: 13 },
cell	单元格属性，语法：{ “row”: 0, “col”: 0, “className”: “htLift htMiddle” },
contextMenu	右键菜单（值有很多）
manualColumnResize:true	拖拽行头或列头改变行或列的大小
manualRowResize:
autoColumnSize:	当值为true且列宽未设置时，自适应列大小
dropdownMenu: true	下拉菜单
filters:true	下拉菜单过滤器
readOnly: true	只读
licenseKey	非商用：“non-commercial-and-evaluation”