handsontable中如何处理超长字段，以及在行头和列头中超长内容的展示问题

一个不正经的正经人儿

于 2023-10-28 20:57:35 发布

阅读量189

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/luxu714/article/details/134096131

版权

安装handsontable

npm install handsontable @handsontable/vue

视图

<template>
    <HotTable  :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>

<script>
export default {
    data() {
		return {
			hotSettings: {
			    rowHeaders: true,
			   
			    manualColumnResize: true,//手工更改列距
			    manualRowResize: true,//手动更改行距
			    comments: true, //添加注释
			    customBorders: [], //添加边框
			    columnSorting: true, //排序
			    stretchH: "all", //根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
				mergeCells: [
			        //合并
			        // {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并，从（1,1）开始行3列3合并成一格
			        // {row: 3, col: 4, rowspan: 2, colspan: 2}
			    ],
			    colHeaders: ['表头'],//自定义列表头or 布尔值
			    colWidths: ['列宽度'],//设置每一列的宽度
            //鼠标移上事件
			   afterOnCellMouseOver: function (event, cored, td) {
            let div = document.createElement('div')

            div.style.position = 'absolute';
            div.style.left = event.clientX + 'px';
            div.style.top = event.clientY + 'px';
            div.style.backgroundColor = '#fff';
            let cellData = this.getDataAtCell(cored.col, cored.row)
            div.innerHTML = cellData
            console.log(cellData, 'cellData')
            div.style.border = '1px solid #bbb'
            // document.body.appendChild(div)


        },
        //鼠标离开事件
        afterOnCellMouseOut: function () {
            let div = document.querySelector('div')
            console.log(div, 'div')
            if (div) {
                div.parentNode.removeChild()
            }
        }，
			}
		}
	},
	
	}
}
</script>