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