10. テーブルを使用して vben フレームワークでレポートを作成する方法

プロジェクトの開発の過程で、多くの特殊なテーブルスタイルがあり、バックエンドが帆鑼を使用してレポートを作成することがありますが、一部の特殊なレポートバックエンドは実現をサポートできません.では、フロントエンドはどのように実現されますか?

まずレンダリングについて:

今回使用した tsx コンポーネントで作成したレポート。

アイデア:

表示するパラメーターを tsx ページに書き込むと、props がパラメーターを受け入れます
ページごとにモジュールを分割し、いくつかの表を記述します。
出力用にすべてのモジュールを結合します。

以下はコードです。

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

セットアップでテーブルを書き込みます。

 // 一级表格头部
    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でのカスタムテーブルの書き方ですが、もちろんこの方法はテーブルを書けるだけではなく、別のパラメータを渡して別の要素を出力すれば、それをスロット(slot)にして検証することができます。などの機能があり、可能性は無限大です。

わからないことがあれば、メッセージを残して議論することができます。

10. テーブルを使用して vben フレームワークでレポートを作成する方法

おすすめ