elementui更改el-table表头样式及修改el-table表格边框的注意事项
初衷
element ui官⽅封装好的 el-table 组件， 好⽤是挺好⽤的，但不可避免的是默认的样式并不⼀定能满⾜实际开发过程中的需要，那就⾃⼰动⽤五姑娘吧。
⼊坑
⼀是参考官⽅⽂档⾥⾯ el-table 的 header-cell-style 和 cell-style 属性进⾏修改，如：
<el-table header-cell-></el-table>
table设置内边框另外也可以使⽤ header-cell-class-name 和 cell-class-name 属性，如：
<el-table cell-class-name="cell-class-name"></el-table>
style：
.cell-class-name {
border-color: #868686;
}
问题
使⽤ header-cell-style和 cell-style 属性虽然能正常显⽰效果，但会抛出异常，反正我是没整明⽩，另外，header-cell-class-name 设置覆盖样式，⽆法⽣效，⽽ cell-class-name 则可以。
该类型检查失败
解决⽅法
设置 el-table 属性:cell-和:header-cell-style=“tableHeaderCellStyle”，通过 js 代码修改样式。
⾥添加：
<el-table
:data="tableData"
:v-loading="tableLoading"
row-key="id"
height="100%"
highlight-current-row
show-summary
border
fit
:cell-
:header-cell-
>
<el-table-column fixed type="index"width="50"></el-table-column>
</el-table>
<script>=> methods⽅法⾥添加：
// 修改 table cell边框的背景⾊
tableCellStyle(){
return'border-color: #868686;'
},
// 修改 table header cell的背景⾊
tableHeaderCellStyle(){
return'border-color: #868686; color: #606266;'
}
问题描述
在我们使⽤饿了么UI框架做项⽬的时候，el-table的⾃带的表格边框颜⾊有时候需要修改⼀下。本⽂简述⼀下修改el-table边框样式的注意事项。
原始代码：
<template>
<div id="app">
<el-table
:data="tableData"
border
>
<el-table-column prop="name"label="姓名"width="180"></el-table-column>
<el-table-column prop="nation"label="国别"width="180"></el-table-column>
<el-table-column prop="bornPlace"label="出⽣地⽅"></el-table-column>
</el-table>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
tableData:[
{
name:"刘备",
nation:"蜀国",
bornPlace:"涿郡涿县（河北省涿州市）",
},
{
name:"曹操",
nation:"魏国",
bornPlace:"沛国谯县（安徽省亳州市）",
},
{
name:"孙权",
nation:"吴国",
bornPlace:"吴郡富春县（浙江省杭州市富阳区）",
},
{
name:"关⽻",
nation:"蜀国",
bornPlace:"河东郡解县（⼭西省运城市盐湖区解州镇）",
},
],
};
},
};
</script>
效果如下
第⼀步，加⼊单元格的回调
代码如下
效果如下
第⼆步，加⼊表头的回调
代码如下
效果如下
第三步，单独给表格加样式代码如下
效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。