image.png
/*设置table的背景色*/
.el-table, .el-table__expanded-cell {background-color: transparent !important;}
.el-table th, .el-table tr, .el-table td {background-color: transparent !important;}
/* 去掉中间数据的分割线 */
.el-table__row>td{border: none;}
/* 去掉上面的线 */
.el-table th.is-leaf{border: none;}
/* 去掉最下面的那一条线 */
.el-table::before {height: 0px;}
设置表格内容的样式、颜色
<el-table :data="table" :header-cell-style="thStyleFun"
:cell-style="cellStyleFun" class="main-table" @selection-change="selectRow">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="nodeName" label="节点名称"></el-table-column>
<el-table-column prop="nodeAlias" label="节点标识"></el-table-column>
<el-table-column prop="nodeStatus" label="节点状态"></el-table-column>
<el-table-column prop="parentNodeName" label="上级节点"></el-table-column>
<el-table-column prop="nodeDetail" label="节点详情"></el-table-column>
<el-table-column label="录入时间" align="center">
<template slot-scope="scope">
<div style="white-space: pre;text-align: center;">{{scope.row.insertDate | dateFormat}}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button type="text" @click="$router.push('/archive/'+scope.row.id)">详情</el-button>
</template>
</el-table-column>
</el-table>
在method下设置想要的样式
// 设置表格内容居中
thStyleFun() {
return 'text-align:center'
},
// 设置表格内容字体颜色
cellStyleFun() {
return 'text-align:center;font-size: 14px;font-weight: bold;color:#55C2FF'
},
