vue修改element-ui el-table的样式,如header的字体颜色、背景色和tr的字体颜色、背景色
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<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>
效果如下图:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)