10. How to use table to write reports in vben framework

        In the process of project development, there are many special table styles. Sometimes the backend will use Fanruan to write reports, but some special report backends cannot support the realization. So how is the frontend realized? Today Let's talk.

First on the renderings:

The report written by the tsx component used this time.

Ideas:

1. Write the parameters to be displayed into the tsx page, and props accepts the parameters
2. Divide modules according to pages and write several tables.
3. Combine all modules for output.

Below is the code directly:

//AllInTableData and showTargetLeftFlot inside are the incoming data

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()}</>;
  },
});

Write a table in setup.

 // 一级表格头部
    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>
      </>
    );

Compose tableElement for output

// 一级表格头部
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 };

The above is the code written in the subpage tsx, which only needs to be referenced in the parent page.

The above is how to write a custom table in vben. Of course, this method can not only write a table, but if different parameters are passed in and different elements are output, then it can be made into a slot (slot), verification and other functions. Possibilities are endless.

If there is anything you don't understand, you can leave a message to discuss.