表格编辑器

使用方法

1<script setup lang="ts">
2  import { HlTableRender } from 'hl-table-render';
3  import 'hl-table-render/dist/hl-table-render.css';
4  import { reactive, ref } from 'vue';
5
6  const hlTableRenderRef = ref();
7  const state = reactive({
8    mode: 'editable',
9    renderData: {
10      rows: [
11        ['101纳税申报企业类型(填写代码)', '纳税代码', '102分支机构就地纳税比例(%)', '102'],
12        ['103资产总额(填写平均值，单位：万元)', 'mima', '104从业人数(填写平均值，单位：人)', ''],
13        ['105所属国民经济行业(填写代码)', true, '106从事国家限制或禁止行业', '2025年01月01日'],
14        ['107适用会计准则或会计制度(填写代码)', '', '108采用一般企业财务报表格式(2019年)版', ''],
15        ['aa', 'bb', 'cc', 'dd'],
16        ['ee', 'ff', 'gg', 'hh'],
17      ],
18      mergeCells: [
19        { row: 4, col: 0, rowspan: 2, colspan: 2}
20      ],
21      cellComments: [
22        {
23          row: 0,
24          col: 2,
25          comment: {
26            value: '初始化批注'
27          }
28        },
29        {
30          row: 2,
31          col: 3,
32          comment: {
33            value: '随便一点批注'
34          }
35        }
36      ],
37      readOnlyCells: [
38        '0-0',
39        '2-0',
40        '0-2',
41        '2-2',
42        '3-2'
43      ],
44      cellTypeList: [
45        {
46          row: 0,
47          col: 1,
48          type: 'text',
49        },
50        {
51          row: 0,
52          col: 3,
53          type: 'numeric',
54        },
55        {
56          row: 1,
57          col: 1,
58          type: 'password'
59        },
60        {
61          row: 1,
62          col: 3,
63          type: 'autocomplete',
64          source: ['aa', 'bb', 'cc', 'dd'],
65          strict: false
66        },
67        {
68          row: 2,
69          col: 1,
70          type: 'checkbox',
71          label: {
72            position: 'after',
73            value: '真的吗？'
74          }
75        },
76        {
77          row: 2,
78          col: 3,
79          type: 'date',
80          dateFormat: 'YYYY年MM月DD日'
81        },
82        {
83          row: 3,
84          col: 1,
85          type: 'dropdown',
86          source: ['aa', 'bb', 'cc', 'dd'],
87        },
88      ]
89    }
90  });
91  const clickGetTableConfig = () => {
92    console.log(hlTableRenderRef.value.getTableConfig());
93  };
94</script>
95
96<template>
97  <div class="box">
98    <n-button @click="clickGetTableConfig">获取表格数据</n-button>
99    <HlTableRender ref="hlTableRenderRef" :mode="state.mode" :render-data="state.renderData"  />
100  </div>
101</template>
102
103<style scoped lang="scss">
104  .box {
105    margin: 50px auto;
106    width: 80%;
107  }
108
109</style>
110

属性说明

1interface Props {
2  mode: 'editable' | 'write' | 'preview'; // 模式 editable 编辑 write 填写 preview 预览
3  readOnlyColor?: string; // 只读状态的颜色，默认#a3a3a3
4  renderData: {
5    rows: string[][]; // 表格数据
6    mergeCells: App.MergeCellsItem[]; // 合并单元格
7    cellComments: App.CellCommentItem[]; // 单元格批注
8    readOnlyCells: string[]; // 只读单元格索引
9    cellTypeList: App.CellTypeItem[]; // 单元格数据类型
10  }
11}
12const props = withDefaults(defineProps<Props>(), {
13  readOnlyColor: '#a3a3a3'
14});