如何实现表格选中时禁用树结构的复选框功能（El-Tree 与 El-Table 联动实现）

在前端开发中，树形结构和表格是常用的组件组合，尤其是在展示和管理复杂数据时。使用 Element UI 的 el-tree 和 el-table 组件，我们可以实现当表格中有选中行时，自动禁用树结构中的复选框，反之亦然。这不仅提升了用户体验，还能有效防止数据操作上的冲突。本文将详细介绍如何实现这一功能，并提供相应的代码示例。

实现思路

1. 树结构 (el-tree)：用于展示分层数据，支持复选框选择。
2. 表格 (el-table)：用于展示详细数据，支持多选行。
3. 联动机制：
   • 当表格中有选中行时，禁用树结构中的所有复选框。
   • 当表格中没有选中行时，启用树结构中的复选框。

代码实现

以下是实现上述功能的关键代码片段。注意，代码部分保持原样，未作修改，仅在说明中进行了润色和解释。

树结构组件

<el-tree
    ref="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 的联动，还可以拓展到其他需要组件联动的场景，为你的项目增添便利和灵活性！如果你还有其他类似需求，欢迎留言交流 😊