0
点赞
收藏
分享

微信扫一扫

探索企业微信助手工具:强化沟通协作,助力高效办公

Jonescy 2024-04-26 阅读 8

隐藏表头和最高层级的复选框

		<!-- 表格 -->
		<el-table
			ref="tableRef"
			v-loading="tableLoading"
			default-expand-all
			class="flex-1 !h-auto"
			row-key="regionId"
			:header-cell-class-name="selectionClass"
			:row-class-name="rowClass"
			:data="menuTree"
			<el-table-column type="selection" width="55" />
			<el-table-column prop="menuName" label="菜单名称" />
		</el-table>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

	/* 隐藏表头的复选框 */
	function selectionClass(row: { columnIndex: number }) {
		if (row.columnIndex === 0) return "headerSelection";
	}
	/* 隐藏最高层级的复选框 */
	function rowClass(row: { row: { parentId: string } }) {
		if (row.row.parentId == "0") return "firstSelection";
	}

在这里插入图片描述
在这里插入图片描述

<style lang="scss" scoped>
	:deep(.el-table .headerSelection .cell .el-checkbox__inner) {
		display: none;
	}

	:deep(.el-table .firstSelection .cell .el-checkbox__inner) {
		display: none;
	}
</style>

实现效果如下:

在这里插入图片描述

举报

相关推荐

0 条评论