<template> <div class="app-container"> <!-- 操作工具栏 --> <div class="mb-4"> <el-button type="primary" @click="showFormDialog()">新增分类</el-button> </div> <!-- 树形表格 --> <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border default-expand-all style="width: 100%" > <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="title" label="分类名称" /> <el-table-column label="操作" width="180" align="center"> <template #default="{ row }"> <el-button type="primary" size="small" @click="showFormDialog(row.id)" >修改</el-button> <el-button type="danger" size="small" @click="handleDelete(row.id)" >删除</el-button> </template> </el-table-column> </el-table> <!-- 表单对话框 --> <el-dialog v-model="formVisible" :title="currentId ? '修改分类' : '新增分类'" width="30%" > <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" > <el-form-item label="分类名称" prop="title"> <el-input v-model="form.title" placeholder="请输入分类名称" /> </el-form-item> </el-form> <template #footer> <el-button @click="formVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template> <script setup> import { ref, onMounted } from 'vue' import request from '@/utils/request' import { ElMessage, ElMessageBox } from 'element-plus' // 表格数据 const tableData = ref([]) // 表单相关 const formVisible = ref(false) const currentId = ref(null) const form = ref({ title: '' }) const formRef = ref(null) // 验证规则 const rules = ref({ title: [ { required: true, message: '分类名称不能为空', trigger: 'blur' } ] }) // 加载数据 const loadData = async () => { try { const res = await request.get('/category/tree') if (res.code === '200') { tableData.value = res.data } } catch (error) { console.error('加载失败:', error) } } // 显示表单对话框 const showFormDialog = async (id) => { currentId.value = id || null if (id) { // 加载现有数据 const res = await request.get(`/category/${id}`) form.value = res.data } else { form.value = { title: '' } } formVisible.value = true } // 提交表单 const submitForm = async () => { try { await formRef.value.validate() const api = currentId.value ? '/category/update' : '/category/save' const res = await request.post(api, { ...form.value, id: currentId.value }) if (res.code === '200') { ElMessage.success('操作成功') formVisible.value = false await loadData() } } catch (error) { console.error('提交失败:', error) } } // 删除处理 const handleDelete = (id) => { ElMessageBox.confirm('确认删除该分类？', '警告', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' }).then(async () => { const res = await request.delete(`/category/delete/${id}`) if (res.code === '200') { ElMessage.success('删除成功') await loadData() } }) } // 初始化加载 onMounted(() => { loadData() }) </script> <style scoped> .app-container { padding: 20px; } .mb-4 { margin-bottom: 16px; } </style>不要分类全部展示,只有电机的时候再展示