在前端开发中,树形结构和表格是常用的组件组合,尤其是在展示和管理复杂数据时。使用 Element UI 的 el-tree
和 el-table
组件,我们可以实现当表格中有选中行时,自动禁用树结构中的复选框,反之亦然。这不仅提升了用户体验,还能有效防止数据操作上的冲突。本文将详细介绍如何实现这一功能,并提供相应的代码示例。
实现思路
- 树结构 (
el-tree
):用于展示分层数据,支持复选框选择。 - 表格 (
el-table
):用于展示详细数据,支持多选行。 - 联动机制:
- 当表格中有选中行时,禁用树结构中的所有复选框。
- 当表格中没有选中行时,启用树结构中的复选框。
代码实现
以下是实现上述功能的关键代码片段。注意,代码部分保持原样,未作修改,仅在说明中进行了润色和解释。
树结构组件
<el-treeref="tree":data="treeData":props="defaultProps"node-key="id"show-checkbox:filter-node-method="filterNode"draggable:current-node-key="parentId"highlight-current:expand-on-click-node="false":auto-expand-parent="false":default-expanded-keys="twoKeys"@node-click="handleNodeClick"@node-expand="handleNodeExpand"@node-collapse="handleNodeCollapse"
/>
表格组件
<!-- 表格代码是封装之后,请注意你们的代码不能直接复制 -->
<common-table:dict="dict.type":columns="columns":dataSource="dataSource":ipagination="ipagination"@queryTable="loadData"@selection-change="handleSelectionChange"@sort-change="handleSortChange"
><template slot="left"><el-table-column type="selection" width="55" align="center" :selectable="selectable"/><el-table-column label="序号" align="center" width="60" type="index" :index="indexMethod"/></template>
</common-table>
Vue 数据与方法
data: function () {return {defaultProps: {children: "children",disabled: (data) => this.isNodeDisabled(data), // 动态禁用label: (data) => (data.label ? data.label : "") + " " + (data.materialCount ? data.materialCount : "")},multipleSelection: [] // 存储表格中选中的行}
},
methods: {
// 判断节点是否需要禁用
isNodeDisabled(data) {return this.multipleSelection.length > 0; // 如果表格有选中,则禁用树节点
},// 表格复选框是否禁用
selectable() {return this.$refs.tree.getCheckedNodes().length === 0;
},/** 列表多选 */
handleSelectionChange(selection) {this.multipleSelection = selection;// 创建新对象以触发响应式更新this.defaultProps = {...this.defaultProps, // 保留其余属性disabled: (data) => this.isNodeDisabled(data) // 动态赋值函数};// 如果树组件依然没有响应,可以使用 Vue 的 $forceUpdate() 强制整个组件重新渲染。// this.$forceUpdate(); // 强制更新视图
},
}
详细说明
1. 树结构 (el-tree
)
- 属性解释:
ref="tree"
:为树组件设置引用,方便在其他地方调用其方法。:data="treeData"
:绑定树的数据源。:props="defaultProps"
:配置树节点的属性,包括标签、子节点等。show-checkbox
:显示复选框。- 其他属性如
draggable
、highlight-current
等用于增强树的交互性。
2. 表格组件 (common-table
)
- 说明:此处使用了封装后的
common-table
组件,需根据实际情况进行调整,避免直接复制代码。 - 关键点:
@selection-change="handleSelectionChange"
:监听表格中选中行的变化,以便联动禁用树节点。
3. 数据与方法
-
defaultProps
:children
:定义子节点的属性名称。disabled
:动态设置节点是否禁用,依据isNodeDisabled
方法。label
:定义节点的显示标签,包含名称和物料数量。
-
isNodeDisabled
方法:- 判断表格中是否有选中行,如果有,则禁用树节点的复选框。
-
selectable
方法:- 判断树中是否有选中的节点,如果没有,则允许表格中的复选框可选。
-
handleSelectionChange
方法:- 更新
multipleSelection
数组,存储当前表格中选中的行。 - 重新赋值
defaultProps
,触发树组件的响应式更新,使复选框状态根据表格选择动态改变。 - 如果树组件未及时更新,可以使用
this.$forceUpdate()
强制重新渲染组件。
- 更新
使用效果
通过上述配置,当用户在表格中选中一行数据时,树结构中的所有复选框将被禁用,防止用户在树和表格之间同时进行选择操作。反之,当表格中没有选中行时,树结构的复选框将恢复可用状态,允许用户进行选择。
结语
通过这篇笔记,你应该已经了解了如何实现表格选中和树节点联动的功能。核心在于动态绑定 disabled 和 selectable 属性的逻辑,通过 Vue 的数据响应式机制,可以轻松实现像 el-tree
和 el-table
这样的复杂组件间的交互。
这种实现方式不仅适用于 el-tree
和 el-table
的联动,还可以拓展到其他需要组件联动的场景,为你的项目增添便利和灵活性!如果你还有其他类似需求,欢迎留言交流 😊