工作记录 -- el-table 组件 row-class-name无效的坑

已于 2023-10-09 15:32:32 修改
阅读量1.3k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2023-10-09 15:29:44 首次发布

el-table 组件使用 row-class-name属性无效

解决方案

  1. 网上搜索所得方案

在这里插入图片描述

  1. 比对之后所得结果
    在这里插入图片描述

我把官方案例完整的复制到自己的页面中发现row-class-name属性是可以生效的，经过仔细对比，只有在style样式中的scoped属性存在差异，其他没有差别。
解决方法：把当前组件中style的scoped属性删除即可。如果某一行的row-class-name没有生效，可能是stripe和row-class-name属性冲突导致的，此时可以把stripe属性删除即可！

还想多一天
关注
Element-UI el-table属性row-class-name用法
一碗清深的博客
07-12 4625
可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。row 是当前行的一个对象，rowIndex 是第几行，起始下标为0，表示第1行。
Element Table的row-class-name无效与动态高亮显示选中行背景色
10-17
知识点一：Element UI Table组件的row-class-name属性使用问题 在使用Element UI的Table组件时，如果直接使用row-class-name属性并按官方文档示例代码写入，可能会遇到无法实现高亮显示预想中的行的情况。例如，当你...
Vue+Element el-table属性row-class-name用法及踩坑
热门推荐
weixin_39018944的博客
01-26 2万+
el-table属性row-class-name用法及踩坑 需求前提：想要给表格的某一行加上不同的background，用来区分当前行的状态 根据官方给出的文档官方文档 在el-table中绑定自定义属性row-class-name <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> </el-table> 在methods中定义方法,这里用来给
row-class-name失效原因
最新发布
nubdhsj的博客
07-20 274
到组件的根元素上，并在 CSS 选择器中添加这个属性来实现样式的局部化。所以没有办法找到你需要添加样式的元素导致row-class-name失效。我在使用iView的Table中需要自定义一个行内样式区分数据，但是我使用文档中的row-class-name发现没有起效果。第二种使用/deep/深度选择器（我使用的就是这种）可以在scope下使用不会影响到全局样式。样式是 Vue 单文件组件中的一个特性，它确保样式只对该组件生效，通过添加唯一的属性（如。第一种不使用scope隔绝 使其成为全局样式。
row-class-name无效问题
Blooming_x的博客
08-20 3533
我们看文档，直接复制代码，发现加的class样式没有效果。 解决方案： 1.去除样式<stylescoped>中的scoped使样式变为全局样式。 2.或者把样式放到app.vue的style样式中，也是全局样式。 3.使用混合样式 4.stripe（是否为斑纹）不能与row-class-name一起使用。 ...
elemenui中表格自定义样式row-class-name
Eddie_Xu的博客
06-29 4807
在日常开发中，el-table是经常用到的一个标签，有些时候需要将某些内容高亮显示，如下图： 官方文档示列： 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 代码： 照着文档，在table标签中加入 :row-class-name=“tableRowClassName”，同时在script里写想要的css样式，发现没有任何变化。 通过查看审查元素可以发现，指定列已经赋上了class，如下图： 仔细对比官方文档，只有
elementUI使用table组件中的row-class-name属性不生效的问题
qq_44864879的博客
07-18 5085
在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。
elementUI中table的row-class-name和cell-class-name
yy_demo的博客
01-25 1830
但是现在需求改变，觉得一整行都是这个颜色，不太好看，想要符合条件的行的指定列背景色改变，这时候可以使用cell-class-name的属性，写法都是差不多的，只不过cell-class-name的第一个参数的对象里面，是四个属性{row, column, rowIndex, columnIndex}，这个时候可以通过rowIndex和columnIndex同时去筛选出符合条件的添加指定样式。因为我使用的是scss，所以深度选择器用的是::v-deep，如果使用的是less，也可以用/deep/
监听element-ui table滚动事件的方法
10-17
row-class-name="table-row-class" height="700" ref="table" @row-click="rowClick"> <el-table-column type="expand"> <el-table-column label="log信息" prop="message"></el-table-column> </el-table-...
vue el-table实现自定义表头
12-30
本文实例为大家分享了vue el-table实现自定义表头的具体代码，供大家参考，具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头。 文档说明如下： 代码实现： <el width=50% visible.sync=isShow ...
element中表格组件的row-class-name和class-name属性的使用以及无效处理
kanno的博客
01-17 2686
element中表格组件的row-class-name和class-name属性的使用以及无样式效果的处理
row-class-name 不生效
qq_45288220的博客
03-15 1108
当 我使用elementplus 文档里row-class-name 这个属性时没效果记录下来 作为备忘录。
ElementUi中table组件使用row-class-name无效的坑
年少不知曲中意,再听已是曲终人
05-15 9845
一、问题再现 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">
关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析
weixin_30305735的博客
01-07 8021
在编写表格的时候想给表头添加样式，使用header-cell-class-name怎么都添加不上样式，检查元素发现连class都没添加上，查了很多资料有人说element之前版本不支持这属性，但我使用的并不是之前的版本啊，有人说是添加scoped的原因，去掉之后确实可以了，但我还是想添加scoped, 所以我修改之后是： <style lang="stylus" scoped&g...
Element-ui中table使用row-class-name无效解决办法
weixin_47438917的博客
09-30 1237
Element-ui中table使用row-class-name无效解决办法
element中table表单row-class-name失效
weixin_53558474的博客
01-22 1801
element中table表单row-class-name不生效
antd table rowClassName不起作用
。
02-16 1448
rowClassName不起作用
关于在el-table中使用:row-class-name=“tableRowClassName“样式不生效问题
多看书少吃饭的博客
09-14 2390
关于在el-table中使用:row-class-name="tableRowClassName"样式不生效问题
vue 中Table 组件的 row-class-name ，某一行添加 添加颜色即Element Table中row-class-name无效
qq_40169610的博客
12-03 1327
vue 中Table 组件的 row-class-name ，某一行添加 添加颜色即Element Table中row-class-name无效
el-table怎么使用cell-class-name
06-11
`el-table` 组件可以通过 `cell-class-name` 属性动态设置单元格的 class 名称。这个属性需要绑定一个函数，该函数接收三个参数：`{row, column, rowIndex, columnIndex}`，分别表示当前单元格所在的行数据、列数据、行索引和列索引。 下面是一个示例： ```html <el-table :data="tableData"> <el-table-column prop="name" label="Name" /> <el-table-column prop="age" label="Age" /> <el-table-column prop="address" label="Address" /> <el-table-column label="Operation"> <template slot-scope="scope"> <el-button type="text" @click="deleteRow(scope.$index)">Delete</el-button> </template> </el-table-column> <el-table-column prop="score" label="Score" :cell-class-name="setCellClassName" /> </el-table> ``` ```js export default { data() { return { tableData: [ { name: 'John', age: 18, address: 'New York', score: 90 }, { name: 'Tom', age: 22, address: 'London', score: 80 }, { name: 'Lucy', age: 20, address: 'Paris', score: 85 }, ], }; }, methods: { setCellClassName({ row, column, rowIndex, columnIndex }) { if (rowIndex % 2 === 0) { // 偶数行的单元格添加背景色 return 'even-row'; } else { // 奇数行的单元格添加边框 return 'odd-row'; } }, deleteRow(index) { this.tableData.splice(index, 1); }, }, }; ``` 在上面的示例中，我们为 `tableData` 数组中的每个对象添加了一个 `score` 属性，并将其绑定到了 `el-table-column` 组件的 `prop` 属性上。然后我们在第四个 `el-table-column` 组件中使用了 `cell-class-name` 属性，并将其绑定到了 `setCellClassName` 方法上。`setCellClassName` 方法根据当前单元格所在的行索引，来动态地设置单元格的 class 名称。这样，在渲染表格时，奇数行的单元格会有一个 `odd-row` 的边框样式，而偶数行的单元格会有一个 `even-row` 的背景色样式。 希望这个示例可以帮助您理解 `el-table` 组件的 `cell-class-name` 属性的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值