1、效果如下:
2、hotSettings表格属性配置
rowHeaders //表格列表序号
colHeaders: colHeaders, //设置表格头部
readOnly //设置列表是否可编辑
dropdownMenu //下拉式菜单
contextMenu //右键显示更多功能
filters //过滤器
manualRowMove //设置行拖拉
manualColumnMove //设置列拖拉
manualRowResize //自定义行宽
manualColumnResize //自定义列高
3、单列表格配置
className //设置单元格对齐方法
renderer: //单列渲染方法
type: //单元格数据类型
4、问题总结
negativeValueRenderer渲染比flagRenderer渲染权限高
updateSettings 对已配置的表格进行修改属性
Handsontable.hooks.add('afterOnCellMouseDown',clickTable,hot); 绑定点击事件
5、代码如下:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<!-- handsontable组件 css文件 -->
<!-- <link rel="stylesheet" type="text/css" href="vue/handsontable.full.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="vue/main.css" /> -->
<!-- handsontable组件 js文件 -->
<!-- <script type="text/javascript" language="JavaScript" src="vue/handsontable.full.min.js"></script> -->
<style>
#hot-display-license-info{
display: none;
}
#metrical_node_table table thead tr th{
background-color: rgb(199, 232, 181);
color: rgb(0, 0, 0);