优化更新
This commit is contained in:
@@ -145,16 +145,16 @@ def update_category(request):
|
||||
|
||||
### 树形选择组件
|
||||
|
||||
分类选择通常使用 el-tree-select 组件:
|
||||
分类选择通常使用 a-tree-select 组件:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<el-tree-select
|
||||
v-model="form.category_id"
|
||||
:data="categoryTree"
|
||||
:props="{ label: 'categoryName', value: 'id' }"
|
||||
<a-tree-select
|
||||
v-model:value="form.category_id"
|
||||
:tree-data="categoryTree"
|
||||
:field-names="{ children: 'children', label: 'categoryName', value: 'id' }"
|
||||
placeholder="请选择分类"
|
||||
check-strictly
|
||||
:allow-clear="true"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -166,9 +166,7 @@ def update_category(request):
|
||||
```vue
|
||||
<template>
|
||||
<BasicTable :data="categoryTree" row-key="id" default-expand-all>
|
||||
<el-table-column prop="categoryName" label="分类名称" />
|
||||
<el-table-column prop="categoryCode" label="分类编码" />
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<!-- 列通过 columns.ts 配置 -->
|
||||
</BasicTable>
|
||||
</template>
|
||||
```
|
||||
@@ -178,11 +176,10 @@ def update_category(request):
|
||||
支持拖拽调整分类层级和顺序:
|
||||
|
||||
```vue
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
<a-tree
|
||||
:tree-data="categoryTree"
|
||||
draggable
|
||||
allow-drop="allowDrop"
|
||||
@node-drop="handleDrop"
|
||||
@drop="handleDrop"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -197,5 +194,5 @@ def update_category(request):
|
||||
4. 排序控制:sort 字段控制分类显示顺序
|
||||
5. 删除校验:删除前检查子级,保证数据完整性
|
||||
6. 循环引用校验:更新时防止 A→B→C→A 死循环
|
||||
7. 前端集成:el-tree-select、树形表格、拖拽排序
|
||||
7. 前端集成:a-tree-select、树形表格、拖拽排序
|
||||
```
|
||||
|
||||
@@ -190,12 +190,13 @@ def delete_cities(city_ids):
|
||||
|
||||
## 前端级联选择
|
||||
|
||||
前端使用 `el-cascader` 组件实现省市区三级联动选择:
|
||||
前端使用 `a-cascader` 组件实现省市区三级联动选择:
|
||||
|
||||
```vue
|
||||
<el-cascader
|
||||
v-model="selectedRegion"
|
||||
:props="cascaderProps"
|
||||
<a-cascader
|
||||
v-model:value="selectedRegion"
|
||||
:options="options"
|
||||
:load-data="loadData"
|
||||
placeholder="请选择省/市/区"
|
||||
/>
|
||||
|
||||
@@ -237,7 +238,7 @@ python manage.py migrate
|
||||
1. 五级行政区划:省/市/区/街道/社区,通过 parent_code 形成树形结构
|
||||
2. 丰富字段:含经纬度、拼音、邮编等信息
|
||||
3. 用户关联:用户表通过四级编码关联城市表
|
||||
4. 级联选择:前端通过 el-cascader 组件实现级联选择
|
||||
4. 级联选择:前端通过 a-cascader 组件实现级联选择
|
||||
5. 删除校验:删除前检查子级,保证数据完整性
|
||||
6. 批量导入:内置全国行政区划数据
|
||||
```
|
||||
|
||||
@@ -209,7 +209,7 @@ application/notice/ application/link/
|
||||
<BasicForm @register="registerSearch" />
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<el-button type="primary" @click="handleAdd">新增链接</el-button>
|
||||
<a-button type="primary" @click="handleAdd">新增链接</a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
|
||||
Reference in New Issue
Block a user