Element el-table自定义表尾,并且添加点击时间
自定义底部代码
页面部分
<el-table ref="tableRef" :header-cell-style="{backgroundColor: 'rgba(0,0,0,0.3)',textAlign:'left','border':'0','color':'#fff'}"
:cell-style="{ backgroundColor: 'transparent',textAlign:'left','border':'0' }" :data="footerRight" size="mini"
show-summary>
<el-table-column v-for="item in footerRight[0]" :label="item.name" width="120">
<template slot-scope="scope">
<span>{{item.value}}</span>
</template>
</el-table-column>
</el-table>
js部分
watch: {
footerRight: function() {
let _this = this;
this.$nextTick(() => {
var length = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')
.length;
if (length != 0) {
for (var i = 0; i < length; i++) {
let html = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')[
i].querySelector('.cell');
// html.innerHTML = "<span @click='test()'>"+_this.databaseType+"</span>";
// console.log(window)
if(i == 0){
html.innerHTML = '<a style="color:black;cursor:pointer;font-size: 16px;">' +
'第一个' +
'</a>';
}else{
html.innerHTML = '<a style="color:black;cursor:pointer;font-size: 16px;">' +
'查看' +
'</a>';
}
}
}
})
}
}
显示结果
不过以上方法会有一个问题,问题如下:
如果有滚动条的情况下会在表尾的上面。解决方法如下:
/* 此处样式 是解决table表格出现横向滚动条时, 合并栏在滚动条下方的问题 */
.el-table{
overflow: auto !important;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper{
overflow:visible !important;
}
.el-table__body-wrapper{
overflow-x:visible !important;
}
/* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
.el-table::after{
position: relative;
}
这是css的写法,scss以及less都可以实现,自己动手
效果如下:
后续写写着写着又发现需要添加点击事件,就很麻烦。不过经过研究还是添加出来的:
watch: {
footerRight: function() {
let _this = this;
this.$nextTick(() => {
var length = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')
.length;
if (length != 0) {
for (var i = 0; i < length; i++) {
let html = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')[
i].querySelector('.cell');
// html.innerHTML = "<span @click='test()'>"+_this.databaseType+"</span>";
// console.log(window)
if(i == 0){
html.innerHTML = '<a style="color:black;cursor:pointer;font-size: 16px;">' +
'第一个' +
'</a>';
}else{
html.innerHTML = '<a data-index='+i+' style="color:black;cursor:pointer;font-size: 16px;">' +
'查看' +
'</a>';
}
html.onclick = function(e) {
// console.log()
var index = e.target.dataset.index
_this.test(_this.footerRight[0][index])
}
}
}
})
}
}
添加上test方法在method中:
methods:{
test(param){
this.$message.success(param.name)
}
}
码云地址:https://gitee.com/wu-meng1/table-demo