vben admin表尾合计行自定义样式修改

原表尾合计行是用的表格,对于有些情形需要不同的合计样式。如改成使用描述列表的形式:在这里插入图片描述
以此为例,修改步骤:

  • 修改src\components\Table\src\components\TableFooter.vue
<template>
  <Description @register="register" />
</template>
export default defineComponent({
  name: 'BasicTableFooter',
  components: { Description },
  props: {
  //传参
  	mockData: {
      type: Object,
    },
    schema: {
      type: Array as PropType<DescItem[]>,
    },
  },
   setup(props) {
    const { mockData, schema } = props;
    const [register] = useDescription({
      title: '汇总信息',
      column: 2,
      data:mockData,
      schema:schema,
    });
     return {  register };
  },
});
  • 修改src\components\Table\src\hooks\useTableFooter.ts
const getFooterProps = computed((): Recordable | undefined => {
    const { summaryFunc, showSummary, summaryData,mockData, schema } = unref(propsRef);
    return showSummary && !unref(getIsEmptyData)
      ? () => h(TableFooter, { summaryFunc, summaryData,mockData, schema, scroll: unref(scrollRef) })
      : undefined;
  });

主要是加入所需传参

  • 修改src\components\Table\src\types\table.ts,在BasicTableProps加入传参
  schema?:DescItem[],
  mockData?: Object,
  • 修改src\components\Table\src\props.ts里basicProps,加入传参
  schema: { type: Array as PropType<DescItem[]>, default: null },
  mockData: {
    type: Object,
    default: null,
  },
  • 应用,在useTable里加入以下属性:
showSummary: true,
schema: schema,
mockData:mockData,
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值