对Element-plus 表格的简单封装

import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "LiTable",
  props: {
    data: {
      type: Array as PropType<any[]>,
      required: true
    },
    maxHeight: {
      type: Number as PropType<number>,
      required: true
    },
    columns: {
      type: Array as PropType<{ prop: string; label: string; sortable?: boolean; minWidth?: number }[]>,
      required: true
    },
    fixed: {
      type: Boolean as PropType<boolean>,
      default: true
    }
  },
  setup(props) {
    return () => (
      <el-table data={props.data} style="width: 100%" max-height={props.maxHeight}>
        {props.columns.map((item, index) => (
          <el-table-column
            fixed={props.fixed && index == 0 ? true : false}
            prop={item.prop}
            label={item.label}
            sortable={item.sortable ?? false}
            minWidth={item.minWidth ?? 120}
          />
        ))}
      </el-table>
    );
  }
});

使用

import { BusinessOverview, LiTableOption } from "@/api/interface";
import { GetBusinessOverview } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import LiTable from "../../components/LiTable";

declare type param = {
  dataTimeRange: string;
};

export declare type LiTableOption = {
  data: any[];
  maxHeight: number;
  columns: { prop: string; label: string; sortable?: boolean; minWidth?: number }[];
  fixed?: boolean;
};



export default defineComponent({
  name: "Overview",
  setup(): () => JSX.Element {
    /* data */
    let param = reactive<param>({
      dataTimeRange: formatDate(0, "end", "yyyy-MM-dd")
    });


    let tableOption = reactive<LiTableOption>({
      data: [],
      maxHeight: 480,
      columns: [
        {
          prop: "name",
          label: "餐段"
        },
        {
          prop: "orderCount",
          label: "订单量"
        },
        {
          prop: "total",
          label: "营业额"
        },
        {
          prop: "sumAmount",
          label: "营业收入"
        }
      ]
    });

    let dataReport = ref<BusinessOverview | null>();

    let coreData = ref<
      {
        text: string;
        value: any;
      }[][]
    >([]);

    let consumeArray = ref<
      {
        text: string;
        value: any;
      }[][]
    >([]);

    /* methods */
    const GetPageData: () => void = async () => {
      dataReport.value = (await GetBusinessOverview(param)).data;

      tableOption.data = dataReport.value.marketList;

      coreData.value = [
        [
          {
            text: `营业收入(元)`,
            value: dataReport.value.sumAllAmount.toFixed(2)
          },
          {
            text: `较上周营业收入`,
            value: dataReport.value.compareSumAllAmount.toFixed(2)
          }
        ],
        [
          {
            text: `营业额(元)`,
            value: dataReport.value.sumAmount.toFixed(2)
          },
          {
            text: `较上周营业额`,
            value: dataReport.value.compareSumAmount.toFixed(2)
          }
        ],
        [
          {
            text: `优惠金额(元)`,
            value: dataReport.value.discountAmount.toFixed(2)
          },
          {
            text: `较上周优惠金额`,
            value: dataReport.value.compareDiscount.toFixed(2)
          }
        ],
        [
          {
            text: `订单量(单)`,
            value: dataReport.value.orderCount.toFixed(2)
          },
          {
            text: `较上周订单数`,
            value: dataReport.value.compareOrderCount.toFixed(2)
          }
        ]
      ];
      consumeArray.value = dataReport.value.consumeIndex.map(l => [
        {
          text: l.title,
          value: l.value
        },
        {
          text: "较上周",
          value: parseFloat(l.compareValue.split(" ")[1]).toFixed(2)
        }
      ]);
    };

    const search: () => void = async () => {
      await GetPageData();
    };

    async function reset(): Promise<void> {
      param.dataTimeRange = formatDate(0, "end", "yyyy-MM-dd");
      await GetPageData();
    }

    /* life circle */
    onMounted(async function (): Promise<void> {
      await GetPageData();
    });

    /* html */
    return () => (
      <div class="overview-container">
        <div style="margin-bottom: 10px" class="card table-box">
          <el-form inline={true} model={param} style="padding-top: 20px">
            <el-form-item label="日期：">
              <el-date-picker
                v-model={param.dataTimeRange}
                type="date"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable={false}
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon={Search} onClick={search}>
                搜索
              </el-button>
              <el-button icon={Delete} onClick={reset}>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          // class="mb10"
          style={{
            display: "flex",
            justifyContent: "space-between"
          }}
        >
          {coreData.value.map(l => (
            <div
              style={{
                width: "24.5%"
              }}
            >
              {l.map(o => (
                <div
                  class="card"
                  style={{
                    borderRadius: `4px`,
                    height: "200px",
                    marginBottom: "10px",
                    display: `flex`,
                    flexDirection: `column`,
                    alignItems: `center`,
                    justifyContent: `center`
                  }}
                >
                  <div
                    style={{
                      fontSize: `27px`,
                      fontWeight: `bold`
                    }}
                  >
                    {o.text}
                  </div>
                  <div
                    style={{
                      marginTop: `15px`,
                      fontSize: `22px`,
                      color: `#fdc31d`
                    }}
                  >
                    {o.value}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      
        <div class="card mb10">
          <LiTable data={tableOption.data} columns={tableOption.columns} maxHeight={tableOption.maxHeight} />
        </div>
      </div>
    );
  }
});

效果图