feat: 新增 @pureadmin/table 多种数据格式（深层结构）示例

src/views/pure-table/components/index.ts

@@ -18,6 +18,7 @@ import TotalRow from "./totalRow.vue";
 import Merge from "./merge.vue";
 import CustomIndex from "./customIndex.vue";
 import Layout from "./layout.vue";
+import NestProp from "./nestProp.vue";
 
 export {
   Base,
@@ -39,5 +40,6 @@ export {
   TotalRow,
   Merge,
   CustomIndex,
-  Layout
+  Layout,
+  NestProp
 };

src/views/pure-table/components/nestProp.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const tableData = [
+  {
+    userInfo: { name: "Test1", age: 22 },
+    other: [
+      { sex: "女" },
+      {
+        more: {
+          content: '<div><span style="color: red">我是 html 片段</span></div>'
+        }
+      }
+    ],
+    role: "设计师"
+  },
+  {
+    userInfo: { name: "Test2", age: 28 },
+    other: [
+      { sex: "男" },
+      {
+        more: {
+          content:
+            '<img width="100" height="100" src="https://xiaoxian521.github.io/pure-admin-table/imgs/11.jpg">'
+        }
+      }
+    ],
+    role: "后端"
+  },
+  {
+    userInfo: { name: "Test3", age: 20 },
+    other: [
+      { sex: "女" },
+      {
+        more: {
+          content:
+            '<img width="100" height="100" src="https://xiaoxian521.github.io/pure-admin-table/imgs/1.jpg">'
+        }
+      }
+    ],
+    role: "程序员鼓励师"
+  },
+  {
+    userInfo: { name: "Test4", age: 26 },
+    other: [
+      { sex: "男" },
+      {
+        more: {
+          content:
+            '<a href="https://github.com/xiaoxian521" target="_black">我是链接，点我去 Follow</a>'
+        }
+      }
+    ],
+    role: "前端"
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "姓名",
+    prop: "userInfo.name"
+  },
+  {
+    label: "性别",
+    prop: "other[0].sex"
+  },
+  {
+    label: "年龄",
+    prop: "userInfo.age"
+  },
+  {
+    label: "Html片段",
+    slot: "content"
+  },
+  {
+    label: "角色",
+    prop: "role"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns">
+    <template #content="{ row }">
+      <span v-html="row.other[1].more.content" />
+    </template>
+  </pure-table>
+</template>

src/views/pure-table/list.tsx

@@ -18,7 +18,8 @@ import {
   TotalRow,
   Merge,
   CustomIndex,
-  Layout
+  Layout,
+  NestProp
 } from "./components";
 
 const rendContent = (val: string) =>
@@ -150,5 +151,11 @@ export const list = [
     content: rendContent("layout"),
     title: "表格布局",
     component: Layout
+  },
+  {
+    key: "nestProp",
+    content: rendContent("nestProp"),
+    title: "多种数据格式（深层结构）",
+    component: NestProp
   }
 ];