十、vben框架如何使用table来写报表

        在项目开发的过程中，有很多特殊的table样式，有的时候后端会用帆软来写报表，但是有的特殊的报表后端就不能支持实现了，那么前端是如何实现的呢，今天我们就来讲讲。

先上效果图：

本次使用的tsx组件来写的报表。

思路：

1. 将需要展示的参数写入tsx页面，props接受参数
2. 根据页面划分模块，写几个table。
3. 将所有模块组合起来进行输出。

下面直接上代码：

//里面的allInTableData和showTargetLeftFlot都为传入的数据

import { defineComponent } from 'vue';
import './index.less';
interface AllInfoData {
  firstTableData: any[];
  sencedTableData: any[];
  footerTableData: any[];
  thirdTable: any[];
  remake: string;
}
export default defineComponent({
  name: 'FrExcel',
  props: {
    allInTableData: {
      type: Object as PropType,
      default: () => {
        return {
          firstTableData: [], //一级表格数据
          sencedTableData: [], //二级表格数据
          footerTableData: [], //表格底部数据
          thirdTable: [], //三级表格数据
          remake: '', //备注
        };
      },
    },
    showTargetLeftFlot: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
const tableElement = (): JSX.Element =>()
  return { tableElement };
},

  render() {
    return <>{this.tableElement()};
  },
});

在setup写一个table。

 // 一级表格头部
    const tableColumns = (): JSX.Element => (
      <>
        

          

            

              单位
            
            
产量
            
钢坯网价
            
铁水网价
            
铁水综合单价
            

              
钢坯炼制费
              

                
钢铁料单耗
                
铁料费用
                
合金费用
                
溶剂费用
                
其他费用
                
当日合计
              
            
            
钢坯成本
            
模拟差额参考值
            
累计产量
            
累计炼制费
            
累计模拟差额参考值
          
        
      
    );

组成tableElement进行输出

// 一级表格头部
const tableColumns = (): JSX.Element => (...)
 // 一级表格主体内容
const tableBody = (): JSX.Element => (...)
//二级表格头部
const tableColumnsSenced = (): JSX.Element => (...)
// 二级表格主体内容
const tableUnitBody = (): JSX.Element => (...)
 //备注
const remark = (): JSX.Element => (...)
 //表格底部合计
const tableFooter = (): JSX.Element => (...)
//组合生成页面
    const tableElement = (): JSX.Element => (
      <>
        

          {[
            tableColumns(),
            tableBody(),
            tableColumnsSenced(),
            tableUnitBody(),
            tableFooter(),
            remark(),
          ]}
        
      
    );
    return { tableElement };

上面就是子页面tsx里写的代码，只需要在父页面引用即可。

以上就是在vben中如何写自定义table的方法，当然这个方法不仅可以写table,像如果传进来不同的参数，输出不同的element，那么就可以做成slot(插槽)，验证等等功能，拥有无限的可能。

如果还有什么不懂的，可以留言讨论。