Vue+ElementUI表格状态区分,row-class-name属性详解
更新时间：2024年08月10日 09:34:28 作者：roongyan92
这篇文章主要介绍了Vue+ElementUI表格状态区分,row-class-name属性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
通过指定Table 组件的 row-class-name属性
来为Table中的某一行添加 class，表明该行处于某种状态。
1.在表格组件上绑定row-class-name属性
<el-table
ref="multipleTable"
:data="tableList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
border
:key="Math.random()"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
width="50"
align="center"
></el-table-column>
<template v-for="item in tableTitle">
<el-table-column
:label="item.label"
:key="item.prop"
:prop="item.prop"
min-width="90px"
align="center"
></el-table-column>
</template>
</el-table>2.在样式中加入背景色
.el-table .info-row {
background: #e4e7ed;
}3.根据业务需求添加方法（methods中）
tableRowClassName({ row, rowIndex }) {
if (row.isTop && row.isTop == 1) {
return "info-row";
}
return "";
}注意：
row-class-name属性与stripe = true互斥
如果你的表格把stripe 属性设为true，即斑马纹显示，
后又设置了row-class-name属性，那row-class-name的效果不会完全体现，
还是斑马纹，只是斑马纹的颜色变化了，
即row-class-name属性与stripe = true互斥，不能同时存在！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
这篇文章主要介绍了使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
Vue提供了丰富的API和组件，可以帮助开发者快速地构建现代化的Web应用程序，本文介绍了Vue如何实现分页功能，包括数据的获取、分页器的实现和页面的渲染2023-09-09
这篇文章主要介绍了Vue使用zTree插件封装树组件操作,结合实例形式分析了vue.js整合zTree插件实现树组件与使用相关操作技巧,需要的朋友可以参考下2019-04-04
这篇文章主要为大家介绍了Vue3必学技巧-自定义Hooks-让写Vue3更畅快示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
前端的数据均是通过接口请求拿到的，而Vue本身不支持ajax请求，那么该怎么解决Vue中的异步请求呢？这儿提供了几种方法，希望对大家有所帮助2022-05-05
要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态，需要的的朋友参考下2017-04-04
这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了Vue监听数据对象变化的源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解
我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,这篇文章主要给大家介绍了关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明的相关资料,需要的朋友可以参考下2022-11-11
最新评论