十、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<AllInfoData>,
      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 => (
      <>
        <div class={'table-header-warpper'}>
          <div class={'table-columns'}>
            <div
              class={[
                'unit-card',
                'table-title fixed-white',
                props.showTargetLeftFlot ? 'flot-left' : '',
              ]}
            >
              单位
            </div>
            <div class={'table-title'}>产量</div>
            <div class={'table-title  '}>钢坯网价</div>
            <div class={'table-title table-three-width'}>铁水网价</div>
            <div class={'table-title'}>铁水综合单价</div>
            <div class={'table-card-warpper'}>
              <div class={'table-card-title table-title'}>钢坯炼制费</div>
              <div class={'table-card-row'}>
                <div class={'table-title'}>钢铁料单耗</div>
                <div class={'table-title'}>铁料费用</div>
                <div class={'table-title'}>合金费用</div>
                <div class={'table-title'}>溶剂费用</div>
                <div class={'table-title'}>其他费用</div>
                <div class={'table-title'}>当日合计</div>
              </div>
            </div>
            <div class={'table-title'}>钢坯成本</div>
            <div class={'table-title'}>模拟差额参考值</div>
            <div class={'table-title'}>累计产量</div>
            <div class={'table-title'}>累计炼制费</div>
            <div class={'table-title'}>累计模拟差额参考值</div>
          </div>
        </div>
      </>
    );

组成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 => (
      <>
        <div class={'table-warpper-xiaoyi'}>
          {[
            tableColumns(),
            tableBody(),
            tableColumnsSenced(),
            tableUnitBody(),
            tableFooter(),
            remark(),
          ]}
        </div>
      </>
    );
    return { tableElement };

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

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

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