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

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

javascript 复制代码
		<!-- 表格 -->
		<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>



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


javascript 复制代码
<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>

实现效果如下:

相关推荐
Mintopia2 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙2 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院5 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记7 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人9218 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada8 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia9 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj9 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人15 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼16 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试