Vue中Hottable的使用

news/2025/3/14 22:11:44/

安装

npm install handsontable @handsontable/vue

引入

<template><HotTable :root="root" :data="tableValue" ref="testHot" :settings="hotSettings"></HotTable>
</template><script>
import HotTable from '@handsontable/vue';
export default {components: { HotTable }
}
</script><style src="../node_modules/handsontable/dist/handsontable.full.css"></style>

属性及使用
以下内容有涉及到dom操作可以看我的另一篇文章dom操作

<script>
export default {data() {return {hotSettings: {rowHeaders: true,//行表头,可以使布尔值(行序号),可以使字符串(左侧行表头相同显示内容,可以解析html),也可以是数组(左侧行表头单独显示内容)。minSpareCols: 2, //列留白minSpareRows: 2,//行留白minRows: 20, //最小行列maxRows: 20000, //最大行列currentRowClassName: 'currentRow', //为选中行添加类名,可以更改样式currentColClassName: 'currentCol',//为选中列添加类名autoWrapRow: true, //自动换行manualColumnFreeze: true, //手动固定列manualColumnMove: true, //手动移动列manualRowMove: true,   //手动移动行manualColumnResize: true,//手工更改列距manualRowResize: true,//手动更改行距comments: true, //添加注释customBorders: [], //添加边框columnSorting: true, //排序stretchH: "all", //根据宽度横向扩展,last:只扩展最后一列,none:默认不扩展fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"fixedColumnsLeft: 2,//固定左边列数fixedRowsTop: 2,//固定上边列数mergeCells: [//合并// {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并,从(1,1)开始行3列3合并成一格// {row: 3, col: 4, rowspan: 2, colspan: 2}],colHeaders: ['表头'],//自定义列表头or 布尔值colWidths: ['列宽度'],//设置每一列的宽度columns: [{ data: "字段名", type: "text"文本/"dropdown"下拉菜单/"date"日期, readOnly: true//只读 },],//添加每一列的数据类型和一些配置cells: this.rowReadonly,            //为单元格设置属性afterRender: this.setRowColStyle    //渲染完成后调用}}},methods:{//设置表格的锁定函数,满足条件的变为readonlyrowReadonly(row, col, prop) {var cellProperties = {};if(col==0){//列数是1的cellProperties.readOnly = true;}if(col==9 && row < 2){//第10列第3行的cellProperties.readOnly = true;}if(row==9){//行数是10的cellProperties.readOnly = true;}return cellProperties;},// 渲染结束后调用setRowColStyle(){const testHot = this.$refs.testHot.hotInstance;let col = '';let colname = ''this.hotSettings.columns.some((item, index) => {//获取想要操作的字段colif (item.data == "字段名") {col = index;colname = item.datareturn true;}});this.tableValue.forEach((item, row) => {if (row >= 0 && colname == '字段名') {try {//对该列数据操作的方法,这里举例把他替换为按钮const cellele = testHot.getCell(row, col);const cellmet = testHot.getCellMeta(row, col);let btn = document.createElement("a");cellele.style = "color: aquamarine !important;text-align: center;";btn.textContent = "操作";//按钮文字设置btn.style = "font-size:10px; border-bottom: 1px solid #2d8cf0";//按钮行内样式设置btn.addEventListener("click", event => {});//点击事件的设置// console.log(cellele);cellele.innerHTML = ""; // 清空单元格子集cellele.appendChild(btn); //添加按钮到单元格} catch (e) {console.log(e);}}});}}
}
</script>

官方文档
https://handsontable.com/features


http://www.ppmy.cn/news/1040559.html

相关文章

基于java远程同步课堂系统设计与实现

摘要&#xff1a;在这样一个网络数据大爆炸的时代&#xff0c;人们获取知识、获取信息的通道非常的多元化&#xff0c;通过网络来实现数据信息的获取成为了现在非常常见的一种方式&#xff0c;而通过网络进行教学&#xff0c;在网络上进行远程的课堂培训&#xff0c;能够根据学…

ElasticSearch的客户端操作

ElasticSearch的客户端操作 1、客户端介绍 官方文档地址&#xff1a; https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html 实际开发中&#xff0c;有多种方式操作Elasticsearch&#xff1a; 客户端工具&#xff1a;发送http请求(RESTful风格)操作…

DataFrame.rename()函数--Pandas

1. 函数作用 修改DataFrame的行名、列名 2. 函数语法 DataFrame.rename(mapperNone, *, indexNone, columnsNone, axisNone, copyNone, inplaceFalse, levelNone, errorsignore)3. 函数参数 参数含义mapper与axis结合使用&#xff0c;表示运用到axis上的值&#xff1a;类字…

【高危】企业微信私有化2.5-2.6.93版本后台API未授权访问漏洞

漏洞描述 企业微信私有化2.5.x版本及2.6.930000版本以下后台中存在接口未授权访问漏洞&#xff0c;攻击者通过访问/cgi-bin/gateway/agentinfo接口可获得Secret&#xff0c;从而利用开放API获取企业通讯录等敏感信息及企业微信内应用权限。 漏洞名称企业微信私有化2.5-2.6.93…

uniapp 顶部头部样式

<u-navbartitle"商城":safeAreaInsetTop"true"><view slot"left"><image src"/static/logo.png" mode"" class"u-w-50 u-h-50"></image></view></u-navbar>

下载安装并使用小乌龟TortoiseGit

1、下载TortoiseGit安装包 官网&#xff1a;Download – TortoiseGit – Windows Shell Interface to Githttps://tortoisegit.org/download/ 2、小乌龟汉化包 在官网的下面就有官方提供的下载包 3、安装

基于Java的ssm图书管理系统源码和论文

基于Java的ssm图书管理系统036 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理&#xff0c;计算机被广泛应用于信息管理系统的环境。计算机的最大好…

分析区域产业发展现状,谋划产业发展路径,提升产业竞争力

随着经济全球化的深入发展&#xff0c;产业与区域经济发展有着不可分割的关系&#xff0c;产业是区域经济发展的基础&#xff0c;产业链的形成可以促进区域经济的协调发展&#xff0c;产业竞争力的提升能够带动区域经济的增长。那么该如何打造区域产业链闭环&#xff0c;提升产…