### 如何在 Vue 中
实现树形结构的
选择功能
#### 使用 Element Plus
实现树形表格中的复
选框选择
Element Plus 是基于 Vue 3 的
组件库，提供了丰富的
组件来帮助开发者快速构建复杂的界面。通过 `el
-table` 和 `el
-tree`
组件可以轻松
实现树形结构的数据展示以及复
选框的功能。
以下是
实现树形表格并带有复
选框的具体方法：
1. **引入必要的
组件**
需要使用到 `el
-table` 和 `el
-checkbox` 来创建表格和复
选框。
2. **配置表格属性**
设置 `
tree-props` 属性用于指定数据的
父子关系字段名，并启用懒加载或动态数据绑定[^2]。
```vue
<template>
<div>
<el
-button @click="toggleAllSelection">全
选/反
选</el
-button>
<el
-table ref="
treeTableRef" :data="tableData" row
-key="id" lazy :load="loadChildren"
border style="width: 100%" default
-expand
-all show
-header
@selection
-change="handleSelectionChange">
<el
-table
-column type="selection" width="55"></el
-table
-column>
<el
-table
-column prop="name" label="名称" sortable></el
-table
-column>
<el
-table
-column prop="level" label="
级别"></el
-table
-column>
</el
-table>
</div>
</template>
<script>
export default {
data
() {
return {
tableData: [
{ id: 1, name: '
节点一', level: 1 },
{ id: 2, pid: 1, name: '子
节点一', level: 2 }
]
};
},
methods: {
toggleAllSelection
() {
this.$refs.
treeTableRef.toggleAllSelection
();
},
handleSelectionChange
(selection
) {
console.log
('当前
选中项:', selection
);
},
loadChildren
(treeRow, resolve
) {
setTimeout
(() => {
const children = [{ id:
treeRow.id * 10 + 1, pid:
treeRow.id, name: `${
treeRow.name}
-child`, level:
treeRow.level + 1 }];
resolve
(children
); // 动态加载子
节点
}, 1000
);
}
}
};
</script>
```
上述代码
实现了以下功能：
- 表格
支持树形结构显示；
- 支持父节点与子
节点之间的联动
选择；
- 提供了一个按钮控制全局全
选/反
选操作；
- 数据可以通过懒加载方式获取，适合处理大量层
级数据。
---
####
uni-app 插件实现无限级数
单选或
多选
对于 H5 或跨平台应用开发，可以
选择使用
uni-app 官方插件或其他第三方
插件来
实现更灵活的
树形结构交互体验。
uni-app 提供了一种简单的方式去定制化
树形控件，如下所示[^3]：
#####
树形
选择器组件实例
该
组件允许用户以
弹窗的
形式打开
树形菜单进行
选择，
支持单选、
多选等
多种模式。
```html
<!
-- TreeSelector.vue
-->
<view class="selector
-container">
<button @click="open
TreePopup">打开
树形
选择器</button>
<picker
-view v
-if="showPicker" mode="multiSelector" @cancel="close
TreePopup" @confirm="onConfirm">
<
tree-node v
-for="
(node,index
) in
treeNodes" :key="index" :node="node"/>
</picker
-view>
</view>
<script>
import
TreeNode from './
TreeNode';
export default {
components: {
TreeNode },
data
() {
return {
showPicker: false,
treeNodes: [
{ id: 1, name: '根
节点A' },
{ id: 2, parent_id: 1, name: '子
节点B' }
],
selectedNodeIds: []
};
},
methods: {
open
TreePopup
() {
this.showPicker = true;
},
close
TreePopup
() {
this.showPicker = false;
},
onConfirm
(selectedItems
) {
this.selectedNodeIds = selectedItems.map
(item => item.id
);
console.log
(this.selectedNodeIds
);
this.close
TreePopup
();
}
}
}
</script>
```
此示例展示了如何利用自定义
组件渲染
树形结构，并提供简单的事件回调机制完成最终确认逻辑。
---
#### 自定义样式调整
无论是采用 Element Plus 还是
uni-app 方案，都可以进一步优化视觉效果。例如设置动画过渡让页面更加流畅自然[^4]:
```css
@keyframes
treeTableShow {
0% { opacity: 0; transform: scale
(0.9
); }
100% { opacity: 1; transform: scale
(1
); }
}
.el
-table__row {
animation:
treeTableShow .8s ease
-in
-out;
}
```
以上 CSS 片段为每一行新增了淡入放大效果提升用户体验。
---
### 总结
综上所述，在 Vue 开发环境中可以根据实际需求
选用不同
框架下的工具包或者自行封装通用型
组件满足业务场景要求。如果追求高效便捷则推荐直接运用成熟的前端UI库如Element Plus；而针对移动端适配性强的应用，则优先考虑
uni-app内置能力扩展。
本文提供了一个uni-app兼容全平台（h5、小程序、app等）的树状节点选择器组件，支持单选、多选，且父级可选。代码整洁注释详尽，包含组件源码、使用示例、API及事件说明，方便快速集成到项目中，实现无限级树形结构选择功能。
订阅专栏 解锁全文
扫一扫
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
