基于vue3+ts配置化table表格组件实现浅析

junner443

已于 2023-06-20 10:52:03 修改

阅读量3.5k

点赞数

分类专栏： vue3组件库文章标签： vue.js javascript 前端

于 2023-06-20 10:42:29 首次发布

本文链接：https://blog.csdn.net/junner443/article/details/131301887

版权

本文介绍了一个基于vue3和typescript实现的配置化table表格组件，旨在减少重复代码，提高代码维护性。组件内封装了分页组件和分页参数管理，支持多种UI框架，提供配置JSON实例，通过接口定义简化数据获取和列渲染。同时，解决了props传对象时默认值被覆盖的问题。

摘要由CSDN通过智能技术生成

背景

同form，table编写会出现大量的table-column组件，并且没有另外处理分页组件及分页参数，出现大量的重复代码影响美观及代码维护，另外，大量的使用table+分页组件，会出现大量的重复逻辑，容易出现遗漏细节性的低级bug，各个页面分页管理其实基本一致，这里将分页组件及分页参数也封装在此组件内部，调用组件不在需要管理分页参数

此组件在element-ui、ant-design-vue项目中均可直接使用，实现原理 vue3+ts组件库同时兼容多种ui框架

效果图

最终实现的效果是这样滴！！！

概要实现逻辑

组件目录

"食用"例子

我们先看下上述效果图的配置化JOSN实例，最终我们将实现所有table表格+分页都能通过这样一些简单的JSON实现渲染，最后通过一个简单的调用即可渲染一个form表单，具体组件的入参如下：

tableConfig：table相关配置，主要是支持element-ui、ant-design-vue table组件所有原生属性（eg：stripe、border等）以及自定义的一些table相关属性具体参看tableConfigFace接口定义，常用字段均有默认值，无特殊指定可以不传
pagingConfig：分页相关配置，主要是支持element-ui、ant-design-vue pagination组件所有原生属性（eg：background、layout等）以及自定义的一些分页相关属性具体参看pagingConfigFace接口定义，常用字段均有默认值，无特殊指定可以不传
thead：table列JSON对象配置，具体参考theadConfigFace，必传
loadData：table数据获取函数配置，此函数必须返回一个promise且次promise必须返回一个满足resultInt接口定义的数据格式的对象，有数据渲染时，必传

调用

<BaseTable
  :thead="thead"
  :load-data="loadData2"
/>
<script lang="tsx" setup>
  // table列配置
  const thead = ref<theadConfigFace>([
    { type: 'index', fixed: 'left' },
    { prop: 'id', label: 'id', width: 100, align: 'left', fixed: 'left' },
    { prop: 'createTime', label: '创建时间', width: 100 },
    { prop: 'loanCount', label: '笔数', width: 80 },
    { prop: 'effectiveDays', label: '下载有效期(天)' },
    { prop: 'statusDesc', label: '状态' },
    {
      prop: 'infoData1',
      label: '数目1',
      width: 160,
      nativeProps：{
        'show-overflow-tooltip': true,
      }
    },
    {
      prop: 'info', label: '统计', children: [
        {
          prop: 'infoData22',
          label: '统计数目22',
          width: 160,
          children: [
            {
              prop: 'infoData221',
              label: '统计数目221',
              width: 160,
            },
            {
              prop: 'infoData222',
              label: '统计数目212',
              width: 160,
            },
          ],
        },
        {
          prop: 'infoData21',
          label: '统计数目21',
          width: 160,
          children: [
            {
              prop: 'infoData211',
              label: '统计数目211',
              width: 160,
            },
            {
              prop: 'infoData212',
              label: '统计数目212',
              width: 160,
              render: (scope: any) => (
                <div>
                  {scope.row.infoData211} render测试
                </div>
              ),
            },
          ],
        },
      ],
    },
  ])
  // 加载函数配置
  const loadData2:loadDataFace = async({ pageIndex, pageSize }: { pageIndex: number, pageSize: number }) => {
    return new Promise<resultInt>((resolve) &