vue3 element-plus 树形select
时间: 2025-06-21 13:58:27 浏览: 19
### Vue3 中使用 Element Plus 实现树形结构 Select 组件示例
在 Vue3 和 Element Plus 中,`el-tree-select` 是一个结合了树形结构和选择器的组件。它允许用户从树形结构中选择节点,并且支持多种功能,如懒加载、数据回显等[^1]。
以下是一个完整的 `el-tree-select` 示例代码,展示如何在表单中实现树形结构的选择器:
```vue
<template>
<el-form :model="formData" :rules="formRules" ref="formRef">
<el-form-item label="所属行业" prop="industry">
<!-- 树形选择器 -->
<el-tree-select
v-model="formData.industry"
:data="industryTreeData"
:props="industryTreeProps"
node-key="id"
value-key="id"
check-strictly
filterable
clearable
:render-after-expand="false"
@change="handleIndustryChange"
/>
</el-form-item>
</el-form>
</template>
<script>
import { reactive, ref } from "vue";
import { ElForm, ElFormItem, ElTreeSelect } from "element-plus";
export default {
components: {
ElForm,
ElFormItem,
ElTreeSelect,
},
setup() {
const formRef = ref(null);
const formData = reactive({
industry: null, // 行业选择值
});
const formRules = {
industry: [
{ required: true, message: "请选择所属行业", trigger: "change" },
],
};
const industryTreeData = [
{
id: 1,
label: "一级行业",
children: [
{ id: 2, label: "二级行业" },
{ id: 3, label: "另一二级行业" },
],
},
{
id: 4,
label: "其他一级行业",
children: [{ id: 5, label: "子行业" }],
},
];
const industryTreeProps = {
label: "label", // 显示的字段名
value: "id", // 值字段名
};
const handleIndustryChange = (value) => {
console.log("选中的行业ID:", value);
};
return {
formRef,
formData,
formRules,
industryTreeData,
industryTreeProps,
handleIndustryChange,
};
},
};
</script>
<style scoped>
/* 自定义样式 */
</style>
```
#### 说明
1. **数据绑定**:通过 `v-model` 将树形选择器与表单数据绑定,确保选中值能够实时更新[^2]。
2. **树形数据**:`data` 属性用于传递树形结构的数据,`props` 定义了如何解析节点的字段[^3]。
3. **功能配置**:
- `check-strictly`:确保只选择单个节点,而不是父节点和子节点同时被选中。
- `filterable`:启用搜索功能,方便快速定位节点。
- `clearable`:允许清空选择[^3]。
- `render-after-expand`:设置为 `false` 可以优化性能,避免一次性渲染所有节点[^1]。
4. **事件处理**:`@change` 事件监听选择变化,触发自定义逻辑。
---
###
阅读全文
相关推荐


















