vue封装的element表格el-table，表头的操作和表体的显示隐藏

        一、近期项目有个需求，在表格头部有个单独的操作，根据按钮显示隐藏表体。

 

 鉴于我的表格是采用的elementUi，封装的el-table组件。主要需要处理2个问题。

1、表头的文字和图标切换

2、表体的隐藏、显示。

二、解决方案：

1、表头的文字和图标切换

直接上代码：

​

	
	


​

upOnFun(typeName) {
	this.$emit('upOnFun', typeName)
}

 在父组件定义需要的配置，和接收到子组件的点击后的操作

upOnFun(child) {
		this.$set(this.configNub, 'tableHeaderUpOn', child == '展开' ? '收起' : '展开')
}

 2.表体的隐藏、显示

最早的时候，我使用表格里的属性row-class-name，在接收到操作数据时，给行的 className 赋值，然后再样式上进行隐藏。

tableRowClassNamw({row}) {
	if(row.upOn == "展开") {
		return 'hideRow'
	}
	if(row.upOn == "收起") {
		return ''
	}
},

.tableBoxClass .hideRow {
	display: none;
}

后来发现这种方法，对于空数据不能进行隐藏。

 最后想到直接对表体进行样式操作：

 :class="config.tableHeaderUpOn == '展开' ? 'hideScrollNode' : ''"


.hideScrollNode .is-scrolling-none {
	display: none;
}

发现这种方法更简单，父子组件之间的交互更便捷。空数据也能实现效果。

心情美美哒，特意记录下！