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

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

 

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

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

2、表体的隐藏、显示。

二、解决方案：

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

直接上代码：

​
<el-table-column v-for="(item, index) in columnList" :key="index" :fixed="item.fixed" v-if="item.isShow" :disabled="item.disabled">
	<template slot="header" slot-scope="scope">
			<div v-if="item.setHeader == 'upOn'" @click="upOnFun(config.tableHeaderUpOn)" style="cursor: pointer;">
				<i class="el-icon-d-arrow-right" :style="config.tableHeaderUpOn == '展开' ? 'transform: rotate(90deg)' : 'transform: rotate(-90deg)'"></i>
			</div>
			<div v-else style="display: inline-block;">
				{{item.label}}
			</div>
	</template>
	<template slot-scope="scope">
			<span v-if="item.setHeader == 'upOn'"></span>
			<span v-else>{{scope.row[item.prop] : '--' }}</span>
	</template>
</el-table-column>

​

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;
}

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

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