vue3使用handsontable
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.安装
npm install handsontable @handsontable/vue3
2.使用
<template>
<hot-table width="100%" height="500" :settings="settings" ref="hotTableComponent"></hot-table>
</template>
<script lang="ts">
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
registerAllModules();
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerCellType(NumericCellType);
registerPlugin(UndoRedo);
export default {
components: { HotTable },
setup() {
//定义handsontable的ref
const hotTableComponent = ref(null);
//vue3的获取核心方法在hotInstance中
let a= hotTableComponent.value.hotInstance.getSourceData(); //获取源数据 (对 象数组或数组的数组)
let b = hotTableComponent.value.hotInstance.getData(); //获取数据(数组的数组)
//可以打印一下这两个方法返回的数据 看自己需要那种数据
//vue2获取handsontable的数据方法 this.$refs.hotTableComponent.getData();
let state = reactive({
settings: {
language: 'zh-CN', // 官方汉化
licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明
//colHeaders
colHeaders: [
"病人姓名",
"病人身份证号",
"病人类型"
],
//columns
columns: [
{
data: "病人姓名",
readOnly: false,
type: "text",
dateFormat: null,
source: null,
strict: false,
numericFormat: null
},
{
data: "病人身份证号",
readOnly: false,
type: "text",
dateFormat: null,
source: null,
strict: false,
numericFormat: null
},
{
data: "病人类型",
readOnly: false,
type: "text",
dateFormat: null,
source: null,
strict: false,
numericFormat: null
}
],
//data
data: [
{
"病人姓名": "测试",
"病人身份证号": "123456789",
"病人类型": "贫困户"
},
{
"病人姓名": "张三",
"病人身份证号": "369258147",
"病人类型": "贫困户"
}
],
currentRowClassName: 'currentRow', // 突出显示行
currentColClassName: 'currentCol', // 突出显示列
minSpareRows: 2, //行留白
autoWrapRow: false, //自动换行
minRows: 2100,
trimWhitespace: false, //去除空格
rowHeaderWidth: 100, //单元格宽度
stretchH: 'all',
renderAllRows: false,
rowHeaders: true, // 行标题 布尔值 / 数组/ 函数
formulas: false, //公式
copyable: true, // 允许键盘复制
wordWrap: false, // 自动换行
copyPaste: true, //复制粘贴
filters: false, //允许通过内置组件或API过滤表数据
search: false,
fixedColumnsLeft: 0, // 固定左边列数
fixedRowsTop: 0, // 固定上边列数
columnSorting: true, // 排序
contextMenu: true, //右键菜单
},
});
return {
...toRefs(state),
hotTableComponent,
};
},
};
</script>
效果如下:
注意点:
1.底部有授权码提示 想要去掉 在settings中添加下面这个属性可以去掉:
licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明 settings的属性
2.安装的依赖不同:
vue3: npm install handsontable @handsontable/vue3
vue2: npm install handsontable @handsontable/vue
3.获取handsontable数据方法不用:
vue3 :
hotInstance.getSourceData() //获取源数据 (对象数组或数组的数组)
hotInstance. getData() //获取数据 (数组的数组)
vue2: getData()
具体可以参考官方文档:Core - API Reference - Handsontable Documentation
参照文章链接:
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)