el-table修改border颜色

el-table修改border颜色

背景：

在前端开发过程中，往往遇到在页面展示excel表格样式，并导出。那么我们需要的表格样式就非常简单，只需要黑色的细边框，而不是element自带的表格样式。

---

（带有机密，不便截取太多，看个样式即可）

解决方案：

            <el-table v-loading="loading" :data="costDetailList" border
                style="width: 100%; border:1px solid black; border-color:black" :cell-style="tableCellStyle"
                :header-cell-style="tableHeaderCellStyle" >
                <el-table-column label="编码" align="center" prop="itemId" />
                <el-table-column label="说明" align="center" prop="itemDescription" />
                <el-table-column label="单位" align="center" prop="itemUnit" width="100px" />
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
        
        

 methods: {

       // 修改 table cell边框的背景色，行高，字体大小
        tableCellStyle() {
            return 'border-color: black; font-size:20px;height:50px'
        },
        // 修改 table header cell的背景色，行高，字体大小
        tableHeaderCellStyle() {
            return 'border-color: black; color: black; background:#FFFFFF;font-size:20px;height:50px'
        },

  }