优化更新

DjangoAdmin_FastAPI_NaiveVue/zh/volume4/frontend/table.md

@@ -1,7 +1,7 @@
 # BasicTable 表格
 
 :::tip 说明
-`BasicTable` 位于 `src/components/Table/src/Table.vue`，基于 ElementPlus 的 `el-table` 二次封装，提供列定义、数据请求、分页、操作列、多选、全屏、密度调整、列设置等能力。
+`BasicTable` 位于 `src/components/Table/src/Table.vue`，基于 NaiveUI 的 `n-data-table` 二次封装，提供列定义、数据请求、分页、操作列、多选、全屏、密度调整、列设置等能力。
 :::
 
 ## 组件架构
@@ -38,7 +38,7 @@ src/components/Table/
     @selection-change="onSelectionChange"
 >
     <template #tableTitle>
-        <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">添加岗位</el-button>
+        <n-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">添加岗位</n-button>
     </template>
 </BasicTable>
 ```
@@ -51,27 +51,27 @@ src/components/Table/
 // src/views/system/position/columns.ts
 
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { NTag } from 'naive-ui';
 
 export const columns = [
     { type: 'selection' },
-    { label: 'ID', prop: 'id', fixed: 'left', width: 50 },
-    { label: '岗位名称', prop: 'name', minWidth: 100 },
+    { title: 'ID', key: 'id', fixed: 'left', width: 50 },
+    { title: '岗位名称', key: 'name', width: 100 },
     {
-        label: '岗位状态',
-        prop: 'status',
-        minWidth: 100,
+        title: '岗位状态',
+        key: 'status',
+        width: 100,
         render(record) {
             return h(
-                ElTag,
-                { type: record.row.status == 1 ? 'success' : 'danger' },
-                { default: () => (record.row.status == 1 ? '正常' : '停用') },
+                NTag,
+                { type: record.status == 1 ? 'success' : 'error' },
+                { default: () => (record.status == 1 ? '正常' : '停用') },
             );
         },
     },
-    { label: '排序', prop: 'sort', minWidth: 100 },
-    { label: '创建人', prop: 'createUser', minWidth: 100 },
-    { label: '创建时间', prop: 'createTime', width: 180 },
+    { title: '排序', key: 'sort', width: 100 },
+    { title: '创建人', key: 'createUser', width: 100 },
+    { title: '创建时间', key: 'createTime', width: 180 },
 ];
 ```
 
@@ -79,17 +79,16 @@ export const columns = [
 
 | 属性 | 类型 | 说明 |
 |------|------|------|
-| `prop` | string | 字段名 |
-| `label` | string | 列标题 |
+| `key` | string | 字段名 |
+| `title` | string | 列标题 |
 | `width` | number | 固定宽度 |
-| `minWidth` | number | 最小宽度 |
 | `type` | string | 列类型：`selection` / `index` |
 | `fixed` | string | 固定列：`left` / `right` |
-| `render` | function | 自定义渲染函数，接收 `{ row, column, index }` |
+| `render` | function | 自定义渲染函数，接收行数据对象 |
 | `isSlot` | boolean | 是否使用插槽渲染 |
 | `ellipsis` | boolean | 是否溢出省略 |
 
-`render` 函数中 `record.row` 是行数据，`record.$index` 是行索引。
+`render` 函数中直接接收行数据对象（如 `record.status`），无需通过 `record.row` 访问。
 
 ## 数据请求
 
@@ -113,8 +112,8 @@ import { TableAction } from '@/components/Table';
 
 const actionColumn = reactive({
     width: 200,
-    label: '操作',
-    prop: 'action',
+    title: '操作',
+    key: 'action',
     fixed: 'right',
     render(record) {
         return h(TableAction, {
@@ -130,7 +129,7 @@ const actionColumn = reactive({
                 {
                     label: '删除',
                     icon: 'Delete',
-                    type: 'danger',
+                    type: 'error',
                     onClick: handleDelete.bind(null, record),
                     auth: ['sys:position:delete'],  // 权限节点
                 },
@@ -218,7 +217,7 @@ const formParams = reactive({ name: '', status: '' });
 const [register, {}] = useForm({
     labelWidth: 80,
     layout: 'horizontal',
-    colProps: { span: 6 } as ColProps,
+    colProps: { span: 6 },
     submitOnReset: true,
     schemas,  // querySchemas.ts 中定义
 });