hansontable在vue中的基本使用教程

<template>
<div id="hansontable">
<hot-table
:data="data"
:settings="hotSettings"
ref="hotTableRef"
></hot-table>
</div>
</template>
<script>
import Handsontable from 'handsontable'
import { HotTable } from '@handsontable/vue'
import 'handsontable/dist/handsontable.full.css'
import { registerAllModules } from 'handsontable/registry'
// register Handsontable's modules
registerAllModules()
import hotSettings from './hotSettings'
export default {
components: {
HotTable,
},
data() {
return {
// data: Handsontable.helper.createSpreadsheetData(10, 7),
data: [
{ car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
{ car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
{ car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
{ car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
],
hotSettings,
hotInstance: null,
}
},
mounted() {
// 获取实例
this.hotInstance = this.$refs.hotTableRef.hotInstance
const getDataAtRowProp = this.hotInstance.getDataAtRowProp
// 示例：只允许单元格值为2019的数据进行更改
this.hotInstance.updateSettings({
cells(row, col, prop) {
const cellProperties = {}
console.log(row, prop)
if (getDataAtRowProp(row, prop) == 2019) {
cellProperties.editor = false
} else {
cellProperties.editor = 'text'
}
return cellProperties
},
})
},
}
</script>
<!-- 注意：这里不能加"scoped"，否则表头的背景颜色无法设置 -->
<style>
.make-me-red {
color: red;
}
.custom-table thead th {
background-color: #d7f1e1;
}
</style>

import Handsontable from 'handsontable'
Handsontable.renderers.registerRenderer(
'negativeValueRenderer',
negativeValueRenderer
)
function negativeValueRenderer(
instance,
td,
row,
col,
prop,
value,
cellProperties
) {
Handsontable.renderers.TextRenderer.apply(this, arguments)
// 示例1:如果单元格的值小于10，则添加类名
if (parseInt(value, 10) < 0) {
td.className = 'make-me-red'
}
// 如果单元格的值为空或者没值
if (!value || value === '') {
td.style.background = '#EEE'
} else {
if (value === 'Nissan') {
td.style.fontStyle = 'italic'
}
td.style.background = ''
}
}
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments)
td.style.fontWeight = 'bold'
td.style.color = 'green'
td.style.background = 'orange'
}
const hotSetting = {
licenseKey: 'non-commercial-and-evaluation',
// colHeaders: true,
// 列合并
//    注意：在第一列的表头是不能合并的
// nestedHeaders: [
//   ['Car', { label: 'Year', colspan: 5 }, 'Chassis color', 'Bumper color'],
//   [
//     'Country',
//     { label: 'City', colspan: 3 },
//     'Address',
//     'Zip code',
//     'MobileH',
//   ],
// ],
// 列名
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
// rowHeaders: true,
rowHeights: 40,
width: '100%',
// height: 'auto',
height: 400,
// 是否可以手动调整列大小
manualColumnResize: true,
// 将所有的列平均拉伸到父容器的宽度
stretchH: 'all',
// 右键下拉菜单
// dropdownMenu: true,
filters: true,
dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
// 列排序
columnSorting: true,
// 单元格的合并
mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 2 }],
// 设置单元格的水平和垂直居中，并为表格添加自定义的类名
className: 'htCenter htMiddle custom-table',
// 单元格样式设置
cells(row, col) {
const cellProperties = {}
// 对第一行设置样式，注意：不包括表头
//     方式1： 直接通过函数
//     方式2： 字符串，通过hansontable的map映射使用渲染器
if (row === 0) {
cellProperties.renderer = firstRowRenderer // uses function directly
} else {
cellProperties.renderer = 'negativeValueRenderer'
}
return cellProperties
},
// 是否只读
// readOnly: true,
}
export default hotSetting