表格编辑器

使用方法

<script setup lang="ts">
  import { HlTableRender } from 'hl-table-render';
  import 'hl-table-render/dist/hl-table-render.css';
  import { reactive, ref } from 'vue';

  const hlTableRenderRef = ref();
  const state = reactive({
    mode: 'editable',
    renderData: {
      rows: [
        ['101纳税申报企业类型(填写代码)', '纳税代码', '102分支机构就地纳税比例(%)', '102'],
        ['103资产总额(填写平均值，单位：万元)', 'mima', '104从业人数(填写平均值，单位：人)', ''],
        ['105所属国民经济行业(填写代码)', true, '106从事国家限制或禁止行业', '2025年01月01日'],
        ['107适用会计准则或会计制度(填写代码)', '', '108采用一般企业财务报表格式(2019年)版', ''],
        ['aa', 'bb', 'cc', 'dd'],
        ['ee', 'ff', 'gg', 'hh'],
      ],
      mergeCells: [
        { row: 4, col: 0, rowspan: 2, colspan: 2}
      ],
      cellComments: [
        {
          row: 0,
          col: 2,
          comment: {
            value: '初始化批注'
          }
        },
        {
          row: 2,
          col: 3,
          comment: {
            value: '随便一点批注'
          }
        }
      ],
      readOnlyCells: [
        '0-0',
        '2-0',
        '0-2',
        '2-2',
        '3-2'
      ],
      cellTypeList: [
        {
          row: 0,
          col: 1,
          type: 'text',
        },
        {
          row: 0,
          col: 3,
          type: 'numeric',
        },
        {
          row: 1,
          col: 1,
          type: 'password'
        },
        {
          row: 1,
          col: 3,
          type: 'autocomplete',
          source: ['aa', 'bb', 'cc', 'dd'],
          strict: false
        },
        {
          row: 2,
          col: 1,
          type: 'checkbox',
          label: {
            position: 'after',
            value: '真的吗？'
          }
        },
        {
          row: 2,
          col: 3,
          type: 'date',
          dateFormat: 'YYYY年MM月DD日'
        },
        {
          row: 3,
          col: 1,
          type: 'dropdown',
          source: ['aa', 'bb', 'cc', 'dd'],
        },
      ]
    }
  });
  const clickGetTableConfig = () => {
    console.log(hlTableRenderRef.value.getTableConfig());
  };
</script>

<template>
  <div class="box">
    <n-button @click="clickGetTableConfig">获取表格数据</n-button>
    <HlTableRender ref="hlTableRenderRef" :mode="state.mode" :render-data="state.renderData"  />
  </div>
</template>

<style scoped lang="scss">
  .box {
    margin: 50px auto;
    width: 80%;
  }

</style>

属性说明

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