修改el-table的样式,使用row-style/header-row-style不生效问题
修改 Table 样式 el header 生效 Style row
2023-09-27 14:27:14 时间
<template>
<el-table
:data="tableData"
:row-style="tableRowStyle"
:header-cell-style="tableHeaderColor">
<el-table-column
property="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
property="age"
label="年龄"
width="120">
</el-table-column>
<el-table-column
property="sex"
label="性别"
width="120">
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'table',
data() {
return {
tableData: [
{
name: 'Cindy',
age: 20,
sex: '女'
},
{
name: 'Mila',
age: 22,
sex: '女'
},
{
name: 'Bob',
age: 23,
sex: '男'
}
]
}
},
created() {},
methods: {
// 修改table tr行的背景色
tableRowStyle({ row, rowIndex }) {
return 'background-color: pink'
},
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background-color: lightblue;color: #fff;font-weight: 500;'
}
}
}
}
</script>
最近在使用vue+element-ui开发中遇到需要改变当前行样式的需求,于是就是用官方文档里边的row-style,发现不生效
<el-table
:data="tableData"
border
:row-style='rowstyles'
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
label="姓名"
width="180">
</el-table-column>
<el-table-column
label="地址">
</el-table-column>
</el-table>
methods: {
rowstyles({row,rowIndex}){
我一开始写的是
return 'color:red';
然后发现怎么都不生效
后来改成一对象的形式返回就可以了。
let styleJson = {
"display":"none"
};
return styleJson
},
}
相关文章
- linux修改TCP最大连接数
- MySQL数据库视图(view),视图定义、创建视图、修改视图
- 修改linux的hostname (修改linux系统的IP和hostname)
- mysql的安装,数据库的操作,创建数据库,修改表,创建表,删除表,插入数据mysql是什么?
- Mac上永久修改默认Python版本
- iview table 表头样式修改
- 修改 Table Form 的 label 样式
- el-table表格中行样式修改不生效
- a-table表格修改返回值方法
- 在MVC3或asp.net中修改KindEditor实现上传图片时添加水印
- el-table 修改指定单元格样式
- el-table表头颜色修改
- wagger的展示路径修改
- Antd表单控件的defaultValue 无法动态修改
- centOS 修改数据库配置问题ONLY_FULL_GROUP_BY 忽略大小写 lower_case_table_names
- Git_撤销修改
- 并发时-修改Linux系统下的最大文件描述符限制
- bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据
- 【WPF】当 ItemsSource 正在使用时操作无效。改用 ItemsControl.ItemsSource 访问和修改元素
- CentOS8克隆虚拟机修改IP,错误:未知的连接 “ens160“