uni小程序 超好用的多级表头、固定列组件

多级表头的gitcode 404 了 需要请到评论区下载

在做小程序页面表格展示的时候有个需求，需要用到多级表头和固定列。找了好多组件效果不理想。

最终找到这个n-table这款组件。虽然他已经停止维护了，但是他好用啊，不仅可以自己修改表格样式，还可以满足需求。废话不多说上最终效果展示。

在微信插件市场还是可以找到使用说明的 n-table点击跳转 并且支持vue2和vue3.

我们找到下方的链接 这里我也放出来 点击跳转

打开后下载zip, 你会得到一个名为n-table_shi_li-master的zip.对其解压打开进入uni-modules文件夹，可以看到n-table文件夹

把这个文件复制到你的项目中 。这里我放在了components文件夹下。

最后在你的项目中引用就可以使用了。 具体表格使用说明查看ext.dcloud.net.cn/plugin?id=7… 下面简单代码展示

<template>
    <!-- 表格 -->
    <n-table :headerOpt="headerOpt" :tableOpt="tableOpt" :tableData="tableDataMulHeader" :columns="columnsMulHeader"
      colKey="dataIndex" idKey="key" :nameOpt="{ isShow: false }" />
</template>

<script lang="ts" setup>
    import NTable from '@/components/n-table/components/n-table/n-table.vue'; // 确保路径正确
// ------- 表格 -------

// 表格数据类型
interface TableData {
  [key: string]: any;
}
// 表格列定义
interface Column {
  title: string;
  dataIndex?: string;
  width?: number;
  textAlign?: string;
  children?: Column[];
}
// 表格样式
const tableOpt = ref({
  fontSize: 10,
  textAlign: 'center',
});
// 表头样式
const headerOpt = ref({
  height: 30,
  textAlign: 'left',
});
// 表格数据
const tableDataMulHeader = ref<TableData[]>([]);
// 表格列定义
const columnsMulHeader = ref<Column[]>([
  {
    title: '时刻',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '有功总(kWh)',
    width: 100,
    children: [
      {
        title: '正向',
        dataIndex: 'zxygz',
        width: 100,
        textAlign: 'center',
      },
      {
        title: '反向',
        dataIndex: 'fxygz',
        width: 100,
        textAlign: 'center',
      },
    ],
  },
  {
    title: '有功峰(kWh)',
    width: 100,
    children: [
      {
        title: '正向',
        dataIndex: 'zxygf',
        width: 100,
        textAlign: 'center',
      },
      {
        title: '反向',
        dataIndex: 'fxygf',
        width: 100,
        textAlign: 'center',
      },
    ],
  },
]);
</srcipt>