对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>

结果

那么这样设置之后就解决问题了！希望可以帮助到你！

对element-UI 的表格进行自定义的修改相关推荐

element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...

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

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

首先

结果

对element-UI 的表格进行自定义的修改相关推荐

最新文章

热门文章