vue el-table的常用操作
1.去掉最下面的那一条线.el-table::before {height: 0;}2.表格去掉背景颜色变透明.el-table,.el-table__expanded-cell {background-color: transparent !important;}.el-table th,.el-table tr,.el-table td {background-color: transpare
·
文章目录
1.去掉表格最下面的那一条线
.el-table::before {
height: 0;
}
效果
2.表格去掉背景颜色变透明
.el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
.el-table th,
.el-table tr,
.el-table td {
background-color: transparent !important;
}
3.表格加载数据时,自定义文本样式
<template>
<el-table :data="tableData" style="width: 100%">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
data() {
return {
tableData: [],
dataText: '' //进去页面先让字样为空
};
},
//请求数据
goodsList() {
this.dataText = '数据正在加载中···'
this.$request(
this.$config.baseApi + "/user/address/inde", "get" ).then(res => {
if (res.code === 200) {
this.tableData = res.data.content;
// 当请求后台,数据为空时,再让页面显示暂无数据
if (this.tableData.length === 0) {
this.dataText = '暂无数据';
}
}
});
}
4.更改表格列标题header-cell-style
和文本cell-style
的样式
<el-table
ref="sortTable"
:data="sortData"
style="width: 100%;"
height="100%"
:header-cell-style="{'background-color': '#fafafa','color': 'rgb(144,157,222)','font-size': '19px','border-bottom': '1px dashed #0F0A3B !important','text-align': 'center'}"
:cell-style="{'background-color': '#fafafa','color': 'rgb(206,214,245)','font-size': '19px','border-bottom': '1px dashed #5243CE !important','text-align': 'center'}"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
>
建议改用属性绑定方式:
<el-table
ref="lockTable"
:data="lockOfData"
style="width: 100%;"
height="100%"
:header-cell-style="tableHeaderCellStyle"
:cell-style="tableCellStyle"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
>
methods: {
tableHeaderCellStyle() {
return {
'background-color': '#fafafa',
'color': 'rgb(144,157,222)',
'font-size': '14px',
'border-bottom': '1px dashed #0F0A3B !important',
'text-align': 'center'
}
},
tableCellStyle() {
return {
'background-color': '#fafafa',
'color': '#fff',
'font-size': '14px',
'border-bottom': '1px dashed #5243CE !important',
'text-align': 'center',
'padding': '0px'
}
}
}
border-bottom:(两根线,列首的线和表格的分隔线。删掉就没有这个线了)
5.el-table 滚动条样式 火狐与谷歌不一样
谷歌设置
.el-table__body-wrapper::-webkit-scrollbar {
/* width: 0;宽度为0隐藏 */
/* 整个表格透明就不要滚动条的背景颜色了 */
width: 10px;
border-radius: 2px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(84, 112, 198, 0.5);
}
火狐可以不设置
6.修改列宽
简单粗暴 直接添加width 手动修改列宽
<el-table-column
prop="aa"
label="班组"
width="50"
/>
7.修改行高
在浏览器上直接查看可以发现 他的行高是由他的pandding决定的
将el-table的cell-style的padding设置,也可以删掉设置成0
<el-table :cell-style="{padding:'6px'}"></el-table>
全局修改td
.el-table td .cell { padding: 5px 1; }
8.修改某几列的背景颜色,字体颜色
<el-table
v-loading="loading"
:data="prodsData"
border
:cell-style="changeCellStyle"
>
methods: {
changeCellStyle(row, column, rowIndex, columnIndex) {
if (row.column.label === '销售订单') {
return 'background-color: rgba(175, 201, 229, 0.1);'
} else {
return 'background-color: rgba(175, 201, 229, 0.1)'
}
}
9. 鼠标经过颜色改变
::v-deep .el-table tbody tr:hover > td {
background-color: #EFF5FF !important;
}
更多推荐
已为社区贡献1条内容
所有评论(0)