【项目复盘-Vue2】element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选

本文链接：https://blog.youkuaiyun.com/Weiqian_/article/details/130130527

本文详细介绍了如何在Vue2项目中结合ElementUI实现el-tree与el-table的联动，包括el-table的多页全选功能以及el-tree节点的禁选。通过分析el-tree的多选、禁用、搜索和长文本显示，以及el-table的多选、序号列、数据保存和全选回显等操作，逐步展示了具体实现步骤和遇到的坑，如只读属性selection、回显数据的处理和多页全选的问题解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要实现的需求：

1.el-table多选框选中，左边对应的树状多选框勾选

2.el-table多页全选功能：在当前页点击多页全选按钮，当前树状节点对应的el-table全部数据全部选中，并且可以回显实现增删改功能

比较啰嗦，可以直接点目录跳到指定部分内容

左边el-tree功能实现分析

1.开启多选框： show-checkbox="true",参考官网api

2.禁用：每一层的树状结点的数据都要有disabled属性，并且disabled="true"

3.支持节点搜索：参考官网节点过滤部分：Element - The world's most popular Vue UI framework

4.节点名称过长显示...并且出现tooltip：在el-tree使用作用域插槽slot-scope添加el-tooltip改写el-tree原来节点

参考：el-tree文字显示不全的解决办法 / 张生荣

参考： elementui中el-tree实现复选框全部禁用_咖啡壶子的博客-优快云博客

----------------------------------------------------------------------------分割线 ------------------------------------------

实现

template部分代码

         // 部门上方搜索框
          <el-input
              v-model="filtext"
              clearable
              placeholder="请输入"
              prefix-icon="el-icon-search"
              size="small"
          />

        // 树状控件
          <el-tree
              ref="tree"
              show-checkbox  // 开启多选
              :check-strictly="true" // 取消父子联动
              :data="treeData" 
              :expand-on-click-node="false"
              :filter-node-method="filterNode" // 支持节点搜索
              :props="defaultProps"
              :default-expand-all="true" // 默认展开全部
              :default-checked-keys="treeCheckedKeys()" // 默认勾选
              highlight-current // 高亮
              node-key="id"
              @node-click="handleNodeClick" // 点击节点切换右边表格数据
          >
            // 节点过长悬浮el-tooltip显示全名
            <span class="span-ellipsis" slot-scope="{ node, data }">
              <el-tooltip effect="dark" :content="node.label" placement="top-start">
                <span :title="node.label">{
  { node.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>

1.开启多选：实现看te