优化更新
This commit is contained in:
@@ -145,16 +145,17 @@ def update_category(request):
|
||||
|
||||
### 树形选择组件
|
||||
|
||||
分类选择通常使用 el-tree-select 组件:
|
||||
分类选择通常使用 n-tree-select 组件:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<el-tree-select
|
||||
v-model="form.category_id"
|
||||
:data="categoryTree"
|
||||
:props="{ label: 'categoryName', value: 'id' }"
|
||||
<n-tree-select
|
||||
v-model:value="form.category_id"
|
||||
:options="categoryTree"
|
||||
label-field="categoryName"
|
||||
key-field="id"
|
||||
placeholder="请选择分类"
|
||||
check-strictly
|
||||
check-strategy="all"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -166,9 +167,9 @@ 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="排序" />
|
||||
<n-table-column title="分类名称" field="categoryName" />
|
||||
<n-table-column title="分类编码" field="categoryCode" />
|
||||
<n-table-column title="排序" field="sort" />
|
||||
</BasicTable>
|
||||
</template>
|
||||
```
|
||||
@@ -178,11 +179,11 @@ def update_category(request):
|
||||
支持拖拽调整分类层级和顺序:
|
||||
|
||||
```vue
|
||||
<el-tree
|
||||
<n-tree
|
||||
:data="categoryTree"
|
||||
draggable
|
||||
allow-drop="allowDrop"
|
||||
@node-drop="handleDrop"
|
||||
:allow-drop="allowDrop"
|
||||
@drop="handleDrop"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -197,5 +198,5 @@ def update_category(request):
|
||||
4. 排序控制:sort 字段控制分类显示顺序
|
||||
5. 删除校验:删除前检查子级,保证数据完整性
|
||||
6. 循环引用校验:更新时防止 A→B→C→A 死循环
|
||||
7. 前端集成:el-tree-select、树形表格、拖拽排序
|
||||
7. 前端集成:n-tree-select、树形表格、拖拽排序
|
||||
```
|
||||
|
||||
@@ -190,12 +190,16 @@ def delete_cities(city_ids):
|
||||
|
||||
## 前端级联选择
|
||||
|
||||
前端使用 `el-cascader` 组件实现省市区三级联动选择:
|
||||
前端使用 `ChinaArea` 组件或 `n-cascader` 实现省市区三级联动选择:
|
||||
|
||||
```vue
|
||||
<el-cascader
|
||||
v-model="selectedRegion"
|
||||
:props="cascaderProps"
|
||||
<!-- 推荐使用项目内置的 ChinaArea 组件 -->
|
||||
<ChinaArea v-model="formData.cityCode" :type="3" @change="handleCityChange" />
|
||||
|
||||
<!-- 或使用 NaiveUI 的 n-cascader -->
|
||||
<n-cascader
|
||||
v-model:value="selectedRegion"
|
||||
:options="regionOptions"
|
||||
placeholder="请选择省/市/区"
|
||||
/>
|
||||
|
||||
@@ -237,7 +241,7 @@ python manage.py migrate
|
||||
1. 五级行政区划:省/市/区/街道/社区,通过 parent_code 形成树形结构
|
||||
2. 丰富字段:含经纬度、拼音、邮编等信息
|
||||
3. 用户关联:用户表通过四级编码关联城市表
|
||||
4. 级联选择:前端通过 el-cascader 组件实现级联选择
|
||||
4. 级联选择:前端通过 ChinaArea 组件或 n-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>
|
||||
<n-button type="primary" @click="handleAdd">新增链接</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
|
||||
Reference in New Issue
Block a user