怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass"
<el-table
:data="targetCarList"
border
fit
v-loading.body="listLoading"
element-loading-text="拼命加载中"
style="width: 100%"
:row-style="rowClass" >
</el-table>
第二步 再根据判断来决定颜色的显示
rowClass (row, index) {
if (this.statusActive === 'PURCHASE_OFFER') {
row.offerNum = row.offerNum ? row.offerNum : 0
if ((row.deployTimeTotal > 30 && row.deployTimeTotal <= 60) && row.offerNum === 0) {
return { "background-color": "#FFDDAA" }
} else if ((row.deployTimeTotal > 60) && row.offerNum === 0) {
return { "background-color": "#FFCCCC" }
}
}
},
上面的row打印出来是每一列的所有数据,决定颜色变化的是 return { "background-color": "#FFDDAA" },如果没有判断是直接返回的。
因为row-style主要是 ----行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
怎么样使element ui 的table某列变色的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
- element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
随机推荐
- iOS - 架构模式 - 解密 MVC、MVP、MVVM、VIPER架构
在 iOS 中使用 MVC 架构感觉很奇怪? 迁移到MVVM架构又怀有疑虑?听说过 VIPER 又不确定是否真的值得切换? 相信你会找到以上问题的答案,如果没找到请在评论中指出. 你将要整理出你在 i ...
- 【转载】 C#中使用float.Parse方法将字符串转换为Float类型
在C#编程过程中,很多时候涉及到数据类型的转换,例如将字符串类型的变量转换为单精度Float类型就是一个常见的类型转换操作,float.Parse方法是C#中专门用来将字符串转换为float类型的,f ...
- eyoucms 模板
https://www.oschina.net/p/eyoucms 下载模板 https://www.eyoucms.com/doc/operation/ 学习手册
- JAVA项目之注册
public class RegisterServlet extends HttpServlet { private UsersService usersService = new UsersServ ...
- 如何统一管理单个任务下所有API的同步情况?
1. 一分钟完成单个API配置 单个API的配置包含:API名称.URL地址.请求方式.参数设置.自定义高级设置. 参数允许用户填写:Text.WebService.Timestamp.DependO ...
- thrift简单示例 (go语言)
这个thrift的简单示例来自于官网 (http://thrift.apache.org/tutorial/go), 因为官方提供的例子简单易懂, 所以没有必要额外考虑新的例子. 关于安装的教程, 可 ...
- 一个.Net的混淆防反编译工具ConfuserEx
给大家推荐一个.Net的混淆防反编译工具ConfuserEx. 由于项目中要用到.Net的混淆防反编译工具. 在网上找了很多.Net混淆或混淆防反编译工具,如.NET Reactor.Dotfusca ...
- ACAG 0x02-4 费解的开关
ACAG 0x02-4 费解的开关 对于这道题,我们不难发现如下性质: 每个位置之多被点击一次: 点击的先后顺序不影响结果: 若确定了第$1$行,则接下来可能的点击方案就只有$1$种.具体原因是:当第 ...
- Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't
在使用真机定位页面元素时启动uiautomatorviewer.bat ,报错Error while obtaining UI hierarchy XML file: com.android.ddml ...
- django 进行语言的国际化及在后台进行中英文切换
项目的部署地为: 中国大陆与美国东海岸, 两个地区的服务器数据不进行同步, 中国地区的服务器页面展示中文, 美国地区的服务器页面展示成英文, 项目后台使用python编程语言进行开发, 并结合djan ...