使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框，切换类型，有物业，网格，电子围栏，行政区划管理

使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框，切换类型，有物业，网格，电子围栏，行政区划管理，这几个树状下拉选择框，网格层级是所属网格，xxxx网格，xxx微网格，xx微网格，物业层级是所属网格，xxxx网格，xx小区，楼栋，单元，楼层，1楼，行政区划是成都市，崇州市， 崇阳街道，廖家镇，xx村/社区，并且每个层级都是能勾选中的，也支持多选，新增或者编辑可以保存或者取消

<template><div class="user-set-manager"><el-card><h1>{{ formTitle }}</h1><el-form:model="userSetForm"ref="userSetFormRef"label-width="100px":rules="formRules"><!-- 用户集名称 --><el-form-item label="用户集名称" prop="name"><el-inputv-model="userSetForm.name"placeholder="请输入用户集名称"maxlength="50"/></el-form-item><!-- 类型选择 --><el-form-item label="类型" prop="type"><el-selectv-model="userSetForm.type"placeholder="请选择类型"@change="handleTypeChange"><el-option label="物业" value="property" /><el-option label="网格" value="grid" /><el-option label="电子围栏" value="fence" /><el-option label="行政区划管理" value="administrative" /></el-select></el-form-item><!-- 树状选择器（根据类型显示不同数据） --><el-form-itemlabel="选择范围"prop="selectedNodes"v-if="userSetForm.type"><el-tree-selectv-model="userSetForm.selectedNodes":data="treeData":props="treeProps"placeholder="请选择范围"multiplecheck-strictlyclearablestyle="width: 100%"/></el-form-item></el-form><template #footer><el-button @click="handleback">取消</el-button><el-button type="primary" @click="handleSave">保存</el-button></template></el-card></div>
</template>

<script setup>
import { ref, computed,onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 弹窗状态const formTitle = ref("新增用户集");
const userSetFormRef = ref(null);// 表单数据
const userSetForm = ref({name: "",type: "",selectedNodes: [], // 存储选中的节点ID
});
onMounted(()=>{if (route.query.opreate) {formTitle.value = '编辑用户集'}else{formTitle.value = '新增用户集'}
})
// 表单验证规则
const formRules = ref({name: [{ required: true, message: "请输入用户集名称", trigger: "blur" }],type: [{ required: true, message: "请选择类型", trigger: "change" }],selectedNodes: [{ required: true, message: "请选择范围", trigger: "change" }],
});// 树状结构配置
const treeProps = {label: "label",value: "id",children: "children",
};// 网格类型数据
const gridTreeData = [{id: "grid1",label: "所属网格",children: [{id: "grid1-1",label: "城东网格",children: [{id: "grid1-1-1",label: "阳光微网格",children: [{ id: "grid1-1-1-1", label: "幸福微网格" }],},{ id: "grid1-1-2", label: "和谐微网格" },],},{ id: "grid1-2", label: "城西网格" },],},
];// 物业类型数据
const propertyTreeData = [{id: "prop1",label: "所属网格",children: [{id: "prop1-1",label: "城南网格",children: [{id: "prop1-1-1",label: "明珠小区",children: [{id: "prop1-1-1-1",label: "1号楼",children: [{id: "prop1-1-1-1-1",label: "1单元",children: [{id: "prop1-1-1-1-1-1",label: "楼层",children: [{ id: "prop1-1-1-1-1-1-1", label: "1楼" },{ id: "prop1-1-1-1-1-1-2", label: "2楼" },],},],},],},],},],},],},
];// 行政区划数据
const administrativeTreeData = [{id: "admin1",label: "成都市",children: [{id: "admin1-1",label: "崇州市",children: [{id: "admin1-1-1",label: "崇阳街道",children: [{ id: "admin1-1-1-1", label: "三元社区" },{ id: "admin1-1-1-2", label: "唐安社区" },],},{id: "admin1-1-2",label: "廖家镇",children: [{ id: "admin1-1-2-1", label: "廖场社区" },{ id: "admin1-1-2-2", label: "民和村" },],},],},],},
];// 电子围栏数据（简化示例）
const fenceTreeData = [{id: "fence1",label: "核心商圈",children: [{ id: "fence1-1", label: "购物中心区域" },{ id: "fence1-2", label: "步行街区域" },],},{ id: "fence2", label: "工业园区" },
];// 根据类型动态切换树数据
const treeData = computed(() => {switch (userSetForm.value.type) {case "grid":return gridTreeData;case "property":return propertyTreeData;case "administrative":return administrativeTreeData;case "fence":return fenceTreeData;default:return [];}
});// 类型切换处理
const handleTypeChange = () => {// 切换类型时清空已选节点userSetForm.value.selectedNodes = [];
};// 新增
function handleback(){router.push('/StrategyCenter/UseBase')
}// 编辑（实际项目中会接收行数据）
const handleEdit = (row) => {userSetForm.value = { ...row };formTitle.value = "编辑用户集";
};// 保存
const handleSave = async () => {const valid = await userSetFormRef.value.validate();if (!valid) return;// 模拟保存请求setTimeout(() => {ElMessage.success(`${formTitle.value}成功`);}, 500);
};
</script><style lang="less" scoped>
.user-set-manager {padding: 20px;
}.action-bar {margin-bottom: 16px;display: flex;justify-content: flex-start;
}
</style>