对element-UI 的表格进行自定义的修改

小半 • 2022年5月29日下午4:34 • 其他分类 • 阅读 378

对element-UI 的表格进行自定义的修改

在项目的开发过程中，我们有时候需要类似于只有表头的下边框和底边框然后表头字体的加粗自定义的需求，element-UI 提供的表格并不能满足开发需求。那么我先上我自定义好的表格样式，如果你的需求跟我一样那就接着往下看吧！

我需要的是对表格里面的边框去掉让他变成是空白然后把表头的的下边框加粗变黑，以及将 <el-input> 框的边框去掉让这个看上去就是一个检测的体检表。

首先

    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        class="customer-no-border-table"
      >

接着写他的style样式

<style>
/*将表格的下边框的去掉*/
.customer-no-border-table th {
  border: none;
}

.customer-no-border-table td, .customer-no-border-table th.is-leaf {
  border: none;
}

/*只保留表头的下边框，将其他的边框消掉为none*/
.customer-no-border-table thead tr th.is-leaf {
  border: 3px solid black;
  border-right: none;
  border-top: none;
  border-left: none;
}

/*设置表头的字体大小和颜色*/
.customer-no-border-table .el-table__header tr th{
  color: #333333 ;
  font-size: 17px;
}


/*隐藏input边框*/
/* 利用穿透，设置input边框隐藏 */
.inputDeep>>>.el-input__inner {
  border: 0;
}
/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.inputDeep>>>.el-textarea__inner {
  border: 0;
  resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如上图 */
}

/*去掉鼠标悬停背景颜色*/
.el-table tbody tr:hover > td {
  background-color: #ffffff !important
}

/*表格最下面的那根线*/
/*
.customer-no-border-table 指的是你自己定义的table的class
.el-table::before  这个是el-table 中的自带属性
*/
.customer-no-border-table.el-table::before {
  height: 3px;
  border: solid black;
}

</style>