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

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

html 复制代码

<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-input
            v-model="userSetForm.name"
            placeholder="请输入用户集名称"
            maxlength="50"
          />
        </el-form-item>

        <!-- 类型选择 -->
        <el-form-item label="类型" prop="type">
          <el-select
            v-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-item
          label="选择范围"
          prop="selectedNodes"
          v-if="userSetForm.type"
        >
          <el-tree-select
            v-model="userSetForm.selectedNodes"
            :data="treeData"
            :props="treeProps"
            placeholder="请选择范围"
            multiple
            check-strictly
            clearable
            style="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>

TypeScript 复制代码

<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>