antd table rowClassName不起作用

最新推荐文章于 2024-03-15 17:04:06 发布
最新推荐文章于 2024-03-15 17:04:06 发布
阅读量1.2k 收藏 1
点赞数
文章标签： css vue Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nana_4/article/details/129064632
版权

rowClassName不起作用的原因是我设置了表格间隔行的背景颜色，所以偶数行的颜色会不起作用，但是奇数行是正常显示的

解决方法：只要给rowClassName的css加上>>>和 !important就可以了

花烁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在antd Table中插入可编辑的单元格实例
01-21
最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图 补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在构造函数内定义： co
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
Element Table的row-class-name无效与动态高亮显示选中行背景色
10-17
主要介绍了Element Table的row-class-name无效与动态高亮显示选中行背景色，本文详细的介绍了解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
row-class-name 不生效
最新发布
qq_45288220的博客
03-15 395
当 我使用elementplus 文档里row-class-name 这个属性时没效果记录下来 作为备忘录。
vue 中Table 组件的 row-class-name ，某一行添加 添加颜色即Element Table中row-class-name无效
qq_40169610的博客
12-03 1193
vue 中Table 组件的 row-class-name ，某一行添加 添加颜色即Element Table中row-class-name无效
vue中使用element-UI样式row-class-name失效原因(好使)
HuangZeJunXXX的博客
08-26 5554
问题描述 vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。 解决方案 1.使用全局属性 在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组...
Vue+element-ui 使用row-class-name修改el-table某一行解决背景色无效
weixin_43633329的博客
03-06 6316
项目场景： 要实现这样的一个功能：为列表特定某一行的背景高亮，如下图，实现某一行的权限字段是超级，那么这行就高亮显示的效果 问题描述： 根据element-ui中el-table中的row-class-name 属性设置 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 官方文档效果图： 根据element-ui中el-table中的row-class-name 属性设置 <template>
row-class-name无效问题
Blooming_x的博客
08-20 3334
我们看文档，直接复制代码，发现加的class样式没有效果。 解决方案： 1.去除样式<stylescoped>中的scoped使样式变为全局样式。 2.或者把样式放到app.vue的style样式中，也是全局样式。 3.使用混合样式 4.stripe（是否为斑纹）不能与row-class-name一起使用。 ...
tableRowClassName颜色失效问题
qq_44795091的博客
04-13 537
使用了斑马纹border stripe就会失效 <el-table :data="logLists" ref="multipleTable" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" style="width: 100%" border stripe> 正常代码
ElementUi中table组件使用row-class-name无效的坑
年少不知曲中意,再听已是曲终人
05-15 9106
一、问题再现 table组件使用row-class-name属性无效! <template> <div> <h3>Table表格组件的使用</h3> <el-table :data="tableData" stripe border :row-class-name="tableRowClassName"> <el-table-column prop="id" label="编号" width="200">
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
Element-ui中table使用row-class-name无效的坑
weixin_51210597的博客
05-09 556
table使用row-class-name无效的坑 <el-table :data="table.bodys" ref="table" stripe :row-class-name="tabRowClassName"> .... </el-table> stripe和 :row-class-name="tabRowClassName"一起使用row-class-name就是无效的
el-table处理某一行样式；el-table表格row-class-name无效原因；el-table格式化某行样式和数据
i_am_a_div的博客
12-07 1067
情景：:row-class-name=“tableRowClassName” 无效果 原因是：el-table的属性里 多了个stripe，stripe属性可以创建带斑马纹的表格。会影响到row-class-name的渲染。去掉stripe即可。 <el-table :data="tableData" stripe style="width: 100%" :row-class-name="tableRowClassName"> ...
Table的row-class-name无效与动态高亮显示选中行背景色
热门推荐
CCG_T的博客
02-03 2万+
Element UI 的Table组件踩坑记： （1）参数row-class-name无效的坑：官方文档给出了如下代码： 但是我使用后并没有出现预初想要第一行高亮的效果，然后console.log(row, rowIndex)，发现控制台输出的值均为undefined。最终解决方案是只要传入row或者rowIndex即可，然后根据自己所要的数据而进行处理，后来我修改代码为如下： tabl
Element-ui中table使用row-class-name无效解决办法
weixin_47438917的博客
09-30 1098
Element-ui中table使用row-class-name无效解决办法
react antd 中table使用rowClassName实现行样式添加背景色
06-08
在 React Ant Design 中，使用 `rowClassName` 属性可以为表格的每一行添加样式。具体实现方法如下： 1. 首先，在表格组件中设置 `rowClassName` 属性，值为一个回调函数。 2. 回调函数接收一个参数，即当前行的数据对象，可以根据这个数据对象来判断应该为当前行添加哪些样式。 3. 在回调函数中返回一个字符串，字符串即为添加给当前行的样式类名。 下面是一个简单的例子： ```jsx import React from 'react'; import { Table } from 'antd'; const 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', }, ]; const rowClassName = (record, index) => { if (index % 2 === 0) { return 'even-row'; } else { return 'odd-row'; } }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const App = () => { return <Table dataSource={dataSource} columns={columns} rowClassName={rowClassName} />; }; export default App; ``` 在上面的例子中，我们定义了一个回调函数 `rowClassName`，该函数接收两个参数：`record` 表示当前行的数据对象，`index` 表示当前行的索引。在该函数中，我们判断当前行的索引是否为偶数，如果是偶数，就返回样式类名 `even-row`，否则返回样式类名 `odd-row`。最后将该函数作为 `rowClassName` 属性传递给 `Table` 组件，即可实现为表格的每一行添加背景色的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值