解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

简介: 解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

问题概述

在树形表格中,通常需要实现以下功能:

全选:用户可以通过勾选表头的复选框来选中所有节点。

多选:用户可以通过勾选每一行的复选框来选中特定节点。

子节点勾选:当用户勾选某个节点的同时,其子节点也会被自动勾选。

父节点勾选:当所有子节点被勾选时,父节点也会自动被勾选。

在Vue 3和Element Plus中,如何实现上述功能可能不太明显,因此我们将一步一步解决这些问题。

解决方案

1. 创建树形表格

首先,我们需要创建一个基本的树形表格,以便进一步操作。我们可以使用Element Plus中的el-tableel-table-column来构建表格。

在下面的示例中,我们创建了一个包含两个节点的树形表格。第一列包含了复选框,用于选择节点。现在,我们将一步一步解决上述问题。

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="Children"
      prop="children">
      <template v-slot="scope">
        {{ scope.row.children.length }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        {
          name: "Node 1",
          children: [
            {
              name: "Node 1.1",
              children: [],
            },
            {
              name: "Node 1.2",
              children: [],
            },
          ],
        },
        {
          name: "Node 2",
          children: [],
        },
      ],
    };
  },
};
</script>

2. 实现全选功能

要实现全选功能,我们需要添加一个控制全选状态的变量selectAll,并在表头的复选框中使用v-model绑定它

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectAll">
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
    };
  },
};
</script>

我们在表头的复选框上绑定了selectAll变量,但还没有实现其功能。我们需要在methods部分添加一个selectAllNodes方法,用于全选或取消全选所有节点。

<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
    };
  },
  methods: {
    selectAllNodes() {
      this.$refs.treeTable.toggleAllSelection();
    },
  },
};
</script>

现在,我们需要在页面上添加一个全选按钮,使用户能够触发selectAllNodes方法。 这样,我们就可以实现树形表格的全选功能。

<template>
  <div>
    <el-button @click="selectAllNodes">
      {{ selectAll ? 'Unselect All' : 'Select All' }}
    </el-button>
    <el-table
      :data="data"
      style="width: 100%"
      ref="treeTable">
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectAll">
      </el-table-column>
      <!-- ... -->
    </el-table>
  </div>
</template>

3. 实现多选功能

要实现多选功能,我们需要在表格上添加一个@selection-change事件监听器,该事件在选择项发生变化时触发。我们可以在事件处理程序中更新选中的节点列表。

<template>
  <div>
    <el-button @click="selectAllNodes">
      {{ selectAll ? 'Unselect All' : 'Select All' }}
    </el-button>
    <el-table
      :data="data"
      style="width: 100%"
      ref="treeTable"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectAll">
      </el-table-column>
      <!-- ... -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
      selectedNodes: [],
    };
  },
  methods: {
    selectAllNodes() {
      this.$refs.treeTable.toggleAllSelection();
    },
    handleSelectionChange(selection) {
      this.selectedNodes = selection;
    },
  },
};
</script>

现在,selectedNodes数组将包含所有选中的节点。用户可以通过勾选每一行的复选框来选择特定节点。

4. 实现子节点勾选

在树形表格中,通常希望当用户勾选父节点时,其所有子节点也会被自动勾选。我们可以使用递归方法来实现这个功能。

首先,添加一个selectChildren方法,该方法接受父节点和一个布尔值,用于标识是否选中父节点。在方法中,我们将遍历父节点的所有子节点,并设置它们的选中状态。

<template>
  <el-table
    :data="data"
    style="width: 100%"
    ref="treeTable"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectAll">
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
      selectedNodes: [],
    };
  },
  methods: {
    // ...
    selectChildren(parent, isSelected) {
      parent.children.forEach((child) => {
        this.$refs.treeTable.toggleRowSelection(child, isSelected);
        if (child.children) {
          this.selectChildren(child, isSelected);
        }
      });
    },
  },
};
</script>

接下来,我们需要在handleSelectionChange方法中检测是否选中了父节点,并调用selectChildren方法。

<template>
  <el-table
    :data="data"
    style="width: 100%"
    ref="treeTable"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectAll">
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
      selectedNodes: [],
    };
  },
  methods: {
    // ...
    handleSelectionChange(selection) {
      this.selectedNodes = selection;
      selection.forEach((node) => {
        if (node.children) {
          this.selectChildren(node, node.selected);
        }
      });
    },
  },
};
</script>

现在,当用户选中父节点时,所有子节点也会被自动勾选。

5. 实现父节点勾选

要实现父节点勾选功能,我们需要在handleSelectionChange方法中检测父节点是否应该被勾选。如果所有子节点都被选中,父节点也应该被选中。如果有任何一个子节点未被选中,父节点应该被取消选中。

我们可以使用递归方法来检查子节点的选中状态,并设置父节点的选中状态。

<template>
  <el-table
    :data="data"
    style="width: 100%"
    ref="treeTable"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectAll">
    </el-table-column>
    <!-- ... -->
  </el-table>
 
 
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
      selectedNodes: [],
    };
  },
  methods: {
    // ...
    handleSelectionChange(selection) {
      this.selectedNodes = selection;
      selection.forEach((node) => {
        if (node.children) {
          this.selectChildren(node, node.selected);
        }
        this.selectParent(node);
      });
    },
    selectParent(node) {
      if (node.parent) {
        const siblings = node.parent.children;
        const selectedSiblings = siblings.filter((sibling) => sibling.selected);
        if (selectedSiblings.length === siblings.length) {
          // All siblings are selected, select the parent
          this.$refs.treeTable.toggleRowSelection(node.parent, true);
        } else {
          // Not all siblings are selected, deselect the parent
          this.$refs.treeTable.toggleRowSelection(node.parent, false);
        }
        this.selectParent(node.parent);
      }
    },
  },
};
</script>

现在,当用户选中所有子节点时,父节点也会自动被选中。如果任何子节点未被选中,父节点将被取消选中。

总结

在本文中,我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题。通过逐步实现这些功能,您可以构建功能强大且用户友好的树形表格组件,以满足各种数据展示需求。希望这些示例代码对您有所帮助,让您更好地理解和使用Vue 3和Element Plus。

关于解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题,懒大王就先分享到这里了,如果你认为这篇文章对你有帮助,请给懒大王点个赞点个关注吧,如果发现什么问题,欢迎评论区留言!!💕💕    

相关文章
|
3天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
19 0
Vue3 基础语法
|
6天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
10 0
|
7天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
19 3
|
9天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
23 0
|
9天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
9天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
21 0
|
9天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
26 0
|
2天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
11 3
|
2天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
10 1
|
2天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1