hansontable文档

VueHandsontable 表格

VueHandsontable 是一个具有电子表格功能和外观的数据网格。可以使用自定义插件轻松修改或扩展它。它使用 JSON 格式绑定到任何数据源并处理大量记录。它支持过滤、排序和 CRUD （创建、读取、更新、删除）等操作，以及高级操作 - 多列排序、创建自定义单元格类型和添加数据摘要。

基础表格

:::demo 当

hot-table

元素中注入

data

对象数组后，在

hot-column

中用

data

属性来对应对象中的键名即可填入数据，用

title

属性来定义表格的列名。可以使用

width

属性来定义列宽。

<template><hot-table:data-source="tableData":settings="settings"><hot-columndata="date"title="日期"width="180"cell-renderer='123'/></hot-column><hot-columndata="name"title="姓名"width="180"/></hot-column><hot-columndata="address"title="地址"/></hot-column></hot-table></template><script>exportdefault{
     data(){
     return{
     settings:{
     showSelection:false,},tableData:[],};},mounted(){
     this.tableData =[{
     date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路 1518 弄',},{
     date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路 1517 弄',},{
     date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄',},{
     date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄',}]}};</script>

:::

表格拖拽

设置 dragCheck 属性，可以进行表格拖拽。

:::demo

dragCheck

属性可以进行表格拖拽。它接受一个

Boolean

，默认为

false

，设置为

true

即为启用。

<template><hot-table:data-source="tableData":settings="settings"><hot-columndata="date"title="日期"width="180"/></hot-column><hot-columndata="name"title="姓名"width="180"/></hot-column><hot-columndata="address"title="地址"/></hot-column></hot-table></template><script>exportdefault{
     data(){
     return{
     settings:{
     showSelection:false,dragCheck:true,},tableData:[],};},mounted(){
     this.tableData =[{
     date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路 1518 弄',},{
     date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路 1517 弄',},{
     date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄',},{
     date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄',}]}};</script>

:::

表格排序

设置 columnSorting 属性，可以进行表格排序。

:::demo

columnSorting

属性可以进行表格排序。它接受一个

Boolean

，默认为

false

，设置为

true

即为启用。

<template><hot-table:data-source="tableData":settings="settings"><hot-columndata="date"title="日期"width="180"/></hot-column><hot-columndata="name"title="姓名"width="180"/></hot-column><hot-columndata=