elementUI之el-table单独修改头部、行、列，滚动条样式

最新推荐文章于 2023-12-21 17:31:11 发布

意林_10

最新推荐文章于 2023-12-21 17:31:11 发布

阅读量676

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_41951632/article/details/113345951

版权

本文详细介绍了如何使用Vue和Element-UI库来定制表格的头部、行样式和列单元格样式，包括颜色、字体大小、边框等。同时，还展示了如何修改滚动条的外观，如宽度、背景色和滑块样式，以实现更美观的用户界面。

摘要由CSDN通过智能技术生成

头部修改使用：header-cell-style
行样式修改：row-style
列单元格样式修改：cell-style

<el-table :data="List" style="width: 100%;background-color: #000823;" max-height="300" :header-cell-style="{background:'#000823',color:'#565F7E',fontSize: '12px', fontWeight: 600, borderColor: '#000823'}" :cell-style="changeCellStyle" :row-style="tableRowStyle">
 </el-table>

 methods: {
      // 修改表格列样式
      changeCellStyle(row) {
        if (row.column.label === 'test') {
            return 'color: #387BFD;font-size: 12px;font-weight: 400; border: none' // 修改的样式
        } else {
            return 'color: #FFFFFF;font-size: 12px;font-weight: 400; border: none'
        }
      },
      // 设置行不同样式
      tableRowStyle(row) {
        if (row.rowIndex%2 == 0) {
          return {backgroundColor:'#072265'}
        } else {
          return {backgroundColor:'#06133a'}
        }
      },
}

// 滚动条样式修改
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 4px; // 纵向滚动条 必写
  background: #091c51;
  border: #000823;
  width: 6px;

}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #072265;
  border-radius: 20px;
  border: #000823;
}