Ant Design Vue的table组件在有数据和没有数据的时候出现的样式冲突问题

初入职场,之前写项目的时候,用的antd的table组件,并没有过多的去关注它的样式问题。这次做的这个项目的时候,我们公司另一个前端和我说,你的分页器部分要给我固定位置,不要让它跟着数据动,让他定在底部别动,而且表格的高度也不要动来动去的,让它占满下面的空白部分。一开始,我是在元素里去检索对应的table的类名,然后在_antd.scss中去覆盖antd原有的样式

.ant-table-body {
  min-height: 8.5rem !important;
}

这样是解决了表格固定的问题,自然而然分页器也就被挤在底部了。

但是过了段时间,当我将测试数据删除时,我发现样式出现了问题:

我的暂无数据为什么被挤下去了??

经过我细心的排查,我才发现antd里面有一个问题,那就是,这个暂无数据展示的table和有数据时展示的数据并不是同一个容器!!官方为什么没有想到做一下优化???

最后我苦思冥想,终于找出了应对它的方法:

由于暂无数据这个table容器在没有数据的时候,会自动隐藏,而展示数据的框在没有数据的时候有是没有数据的(好像废话(🤡🤡🤡),因此我对它做了一个定位,把蓝色的和红色的重叠起来了

.ant-table-body {
  border: 5px solid red;
  min-height: 8.5rem !important;
  // display: none;
}
.ant-table-scroll {
  position: relative !important;

  .ant-table-placeholder {
    border: 5px solid blue;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    top: 55px;
    min-height: 8.5rem !important;
  }
}

OK,问题完美解决了,

汗流浃背了吧老弟😎😎😎,是不是根本看不出来!!

那么这个问题就被我偷鸡偷下来了,希望antd官方优化一下这个表格的问题,加个API可以手动设置。

以上

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Ant Design VueTable 组件提供了 `customRow` 和 `customHeaderRow` 属性,可以自定义每行和表头的渲染。我们可以利用这个特性,在表头最后一列加上一个求和单元格,并在每一行的对应列单元格中填入数据。 具体实现步骤如下: 1. 在表头的最后一列加上一个求和列,代码如下: ```html <a-table-column title="总计" dataIndex="total" key="total" customHeaderRow={(columns, index) => { return { on: {}, props: { colSpan: columns.length - 1, }, }; }}> <template slot-scope="text"> {{ text }} </template> </a-table-column> ``` 这里使用了 `customHeaderRow` 属性,将求和列合并到表头的最后一列,并且不设置 `dataIndex` 和 `key` 属性,以避免它被渲染为真实数据的列。 2. 在每一行的对应列单元格中填入数据,并且在最后一列单元格中计算总和,代码如下: ```html <a-table-column title="数量" dataIndex="quantity" key="quantity" customRow={(record, index) => { return { on: {}, props: {}, children: record.quantity, onCell: () => { return { style: { textAlign: 'right', }, }; }, }; }} /> <a-table-column title="单价" dataIndex="price" key="price" customRow={(record, index) => { return { on: {}, props: {}, children: record.price, onCell: () => { return { style: { textAlign: 'right', }, }; }, }; }} /> <a-table-column title="小计" key="subtotal" customRow={(record, index) => { const subtotal = record.quantity * record.price; if (index === dataSource.length - 1) { // 计算总和 let sum = 0; dataSource.forEach((item) => { sum += item.quantity * item.price; }); return { on: {}, props: {}, children: sum.toFixed(2), onCell: () => { return { style: { textAlign: 'right', fontWeight: 'bold', }, }; }, }; } else { return { on: {}, props: {}, children: subtotal.toFixed(2), onCell: () => { return { style: { textAlign: 'right', }, }; }, }; } }} /> ``` 这里使用了 `customRow` 属性,自定义每一行的渲染。在对应列的单元格中填入数据,同在最后一列单元格中计算总和。 完整的示例代码如下: ```html <template> <a-table :columns="columns" :dataSource="dataSource" bordered /> </template> <script> export default { data() { return { columns: [ { title: '名称', dataIndex: 'name', key: 'name', }, { title: '数量', dataIndex: 'quantity', key: 'quantity', customRow: (record, index) => { return { on: {}, props: {}, children: record.quantity, onCell: () => { return { style: { textAlign: 'right', }, }; }, }; }, }, { title: '单价', dataIndex: 'price', key: 'price', customRow: (record, index) => { return { on: {}, props: {}, children: record.price, onCell: () => { return { style: { textAlign: 'right', }, }; }, }; }, }, { title: '小计', key: 'subtotal', customRow: (record, index) => { const subtotal = record.quantity * record.price; if (index === this.dataSource.length - 1) { // 计算总和 let sum = 0; this.dataSource.forEach((item) => { sum += item.quantity * item.price; }); return { on: {}, props: {}, children: sum.toFixed(2), onCell: () => { return { style: { textAlign: 'right', fontWeight: 'bold', }, }; }, }; } else { return { on: {}, props: {}, children: subtotal.toFixed(2), onCell: () => { return { style: { textAlign: 'right', }, }; }, }; } }, }, ], dataSource: [ { name: '商品 1', quantity: 2, price: 10.5, }, { name: '商品 2', quantity: 3, price: 5.2, }, { name: '商品 3', quantity: 1, price: 6.8, }, ], }; }, }; </script> ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值