Antd｜更改默认样式的一个例子(ant-table)

最新推荐文章于 2023-09-19 15:38:38 发布
最新推荐文章于 2023-09-19 15:38:38 发布
阅读量1k 收藏
点赞数
分类专栏： 前端开发 文章标签： react.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44589540/article/details/121359289
版权

问题描述

有一个业务场景需要大表嵌套子表，大表需要固定最后一列，行展开后会遮挡住子表部分，入下图所示：
在这里插入图片描述

解决方案

在Elements中找到超出部分的对应元素
在这里插入图片描述
在右侧的element.style中输入display:none发现问题可以解决
在这里插入图片描述
接下来的问题在于如何修改antd的默认样式
在大表定义className="pr-list-table"
CSS部分如下所示：

.pr-list-table .ant-table-fixed-right .ant-table-expanded-row.ant-table-expanded-row-level-1 {
  display: none;
}

需要注意的是几个类名之间的空格表示父子关系，.ant-table-expanded-row.ant-table-expanded-row-level-1两个类为同一级中间不能有空格，加上.ant-table-fixed-right是为了多一层筛选，更改筛选出需要的指定元素的样式

全幼儿园最聪明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
05-28
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此仓库已废弃重要： 此仓库后续不再维护，也不再接受更多的特性更新。ant-design/pro-table 将会...Table属性描述类型默认值request一个获得 dataSource 的方法(params?: {pageSize: number;current: number;[key: s
Ant table表格合并单元格使用
m0_54679211的博客
10-08 3871
前端，随堂笔记吧，小笔记，不喜勿喷！仅供参考学习
Ant-Table样式初始化
臧小川的博客
05-13 978
效果图 JS import { useState, useEffect } from 'react' import styles from './style.less' import { Table, Space } from 'antd'; const dataSource = [ { name: '羽神', grade: '优', time: '2022-5-13 2022-5-18', detail: '我跨过沙漠之舟 背
Ant中Table表格的一些设置
最新发布
2301_76315784的博客
09-19 534
1、相继导入表头，使用dataIndex与数据相对应，fixed确定位置，titile确定表格内容。在标签<a-table>中添加:rowClassName属性，以及添加addRowColor函数。2、导入表格内容，每条数据对象的对象名与columns中的dataIndex相对应。在<style>中添加oddRow与evenRow的样式。
AntDesign中Table的嵌套子表格实现-expandedRowRender插槽用法
jadetii的学习地盘
05-15 3425
要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后（父表格添加事件@expand），获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。但单纯获取数据后给子表格赋值时，数据用的是innerData定义的全局变量，数据会出现覆盖（同时点开两个父节点，对应的子表格数据相同）问题。查看上下级推广关系的数据展示，关系有好几层时，使用嵌套表格。这种情况下（单条数据中本身就含有。里面有四个参数（重点是第一个）赋给内层的table！第一个参数固定不用动。解决方法：使用键值对。
解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用 出现错位的问题
刻痕
02-20 1980
解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用 出现错位的问题 render() { this.$nextTick(() => { setTimeout(() => { let element = document.querySelectorAll(".ant-table-expanded-row"); let len = eleme
antd-table-dragula:Ant Design Table + Dragula - 行拖放
05-31
桌+ 行拖放和状态更新 这个项目是用引导的。 在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。
ant-design-editable-tree-table:可编辑的树形表格，有两个分支哦，v4 是 antd v4 的版本
05-01
可编辑的树形表格有两个分支哦，v4 是 antd v4 的版本发现一个更好更强大的：计划学习完这块就不更新此仓库了
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
[ant design of vue ] table表格 ,选中行添加样式
AAAXiaoApple的博客
06-29 1438
table 表格 ， 选中行 添加样式
antd中table组件选中单行换样式（比如背景颜色）
见贤思齐焉，见不贤内自省
12-14 7802
今天项目中有一个需求，点击某一行后，将改行的背景颜色换掉，换成一个比较醒目的颜色。 首先看了看官方，官方还是比较可爱可亲的，都给我们准备好了，
antd Table组件筛选功能，重新渲染筛选项依然选中
coco723的博客
07-10 1630
最近项目迭代中，设计到好多列表相关的展示，基于React封装了antd的Table组件，代码大致如下： <Table dataSource={dataSource} columns={columns} size={tableSize ? tableSize : "middle"} onChange={handleTableChange} scroll={scroll} pagination={{ current:
antd table改变某一单元格样式和改变表头样式
weixin_47454566的博客
02-08 1049
ui要求是改变某一表头样式，和某一列单元格样式。
antd Table 展开行可全部展开或关闭
热门推荐
赵乘风_i
12-18 1万+
有一个需要实现的需求： 可展开表格 可以全部展开或关闭。如下： 技术实现前提： React + antd Table + Hooks + tsx 在 antd Table 上并没有找到这个属性，所以就自己上手来解决一下咯。 实现思路： 写一个同级的 div ,设置其css属性，让它绝对定位到 父表格对应的th上 设置其打开或关闭的显隐 使Table的所有 keys 可控 完善细节 总体...
antd可展开table的expandedRowRender的全部展开问题
qq_42132814的博客
02-08 1万+
在项目中使用到了可展开的table，再将antd中的代码迁移到自己项目中后，发现了一个bug： 官网中的例子是每行单独展开，互不干扰的， 但是我在引用代码后，发现我无论我点击哪个，所有的行都会展开，开始我以为是代码粘贴的错误，检查一番后，发现没有问题 于是去阅读了一番table的api，展开功能的expandable下有个expandedRowRender控制展开的行 于是我将record打印出来，发现点击展开时，他会将所有的行数据都打印出来，而同样的操作打印官网的例子，则不是，在查了一些资
antd表格固定后出现，对不齐的现象，解决方案
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-30 9158
问题描述： antd表格固定后出现对不齐的现象，比如设置了fixed。如下图 这个是官方的bug，在后续版本修复了 在3.26.1里修复了。 antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952 解决方案： 1.升级版本（方案一） 但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了 2.样式控制（方案二） (1).github 上antd issues 19952给了一个方案 ...
解决Antd 表格固定列后列间有空白间隙的问题
徐行之的博客
01-16 1万+
问题描述： antd 表格设置列fixed属性，scroll为x:true后，如果列数少，会出现列间空白间隙。 原因： antd的表格为了实现固定列，横向滚动的效果，会多渲染出一个用于覆盖原始表格固定列的表格，该表格只渲染被固定的列，然后在横向滚动条滚动时，该表格固定不动，下面被覆盖的原始表格来回滚动，从而实现左右某些列固定，中间列可以滚动的效果。然后，在渲染时，两个表格固定列每一列的列宽度...
如何修改element.style样式
金林苑
12-28 5617
相信很多朋友在修改主题css时遇到过一些问题，比如说出现这个elememt.style，这个有时候无法直接修改，因为找不到。因此可以通过css中的 !important 语法优先权来实现我们想要的效果。 举个例子： 默认情况下上面的背景颜色是绿色，我们找不到element.style该怎么修改呢，这时候就可以在下面CSS样式表里面修改: 如上图，在css样式表里面
antd vue table第一列名称表头不要,最后一行写数据的总值
06-01
你可以使用 `showHeader` 属性来控制表格的表头是否显示，将其设置为 `false` 即可隐藏第一列的表头。例如： ```html <template> <div> <a-table :columns="columns" :dataSource="dataSource" :showHeader="false"> <template #footer> <a-table-row> <a-table-cell></a-table-cell> <a-table-cell>Total</a-table-cell> <a-table-cell>{{ total }}</a-table-cell> </a-table-row> </template> </a-table> </div> </template> <script> export default { data() { return { columns: [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ], dataSource: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ], }; }, computed: { total() { return this.dataSource.reduce((acc, curr) => acc + curr.age, 0); }, }, }; </script> ``` 在上述代码中，我们将 `showHeader` 属性设置为 `false`，并在模板中使用 `#footer` 插槽来添加表格的底部行。在底部行中，我们使用 `a-table-cell` 组件来添加单元格。最后一列中，我们使用计算属性 `total` 来计算所有数据中 `age` 字段的总和。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值