第一次提交

jeecgboot-vue3/src/views/demo/document/table/InnerTableDemo.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" class="components-table-demo-nested">
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'operation'">
+          <a>Publish</a>
+        </template>
+      </template>
+      <template #expandedRowRender>
+        <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
+          <template #bodyCell="{ column }">
+            <template v-if="column.dataIndex === 'state'">
+              <span>
+                <a-badge status="success" />
+                Finished
+              </span>
+            </template>
+            <template v-if="column.dataIndex === 'operation'">
+              <span class="table-operation">
+                <a>Pause</a>
+                <a>Stop</a>
+                <a-dropdown>
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item>Action 1</a-menu-item>
+                      <a-menu-item>Action 2</a-menu-item>
+                    </a-menu>
+                  </template>
+                  <a> More </a>
+                </a-dropdown>
+              </span>
+            </template>
+          </template>
+        </a-table>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Platform', dataIndex: 'platform', key: 'platform' },
+    { title: 'Version', dataIndex: 'version', key: 'version' },
+    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
+    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
+    { title: 'Action', key: 'operation' },
+  ];
+
+  interface DataItem {
+    key: number;
+    name: string;
+    platform: string;
+    version: string;
+    upgradeNum: number;
+    creator: string;
+    createdAt: string;
+  }
+
+  const data: DataItem[] = [];
+  for (let i = 0; i < 3; ++i) {
+    data.push({
+      key: i,
+      name: 'Screem',
+      platform: 'iOS',
+      version: '10.3.4.5654',
+      upgradeNum: 500,
+      creator: 'Jack',
+      createdAt: '2014-12-24 23:12:00',
+    });
+  }
+
+  const innerColumns = [
+    { title: 'Date', dataIndex: 'date', key: 'date' },
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Status', dataIndex: 'state', key: 'state' },
+    { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+    {
+      title: 'Action',
+      dataIndex: 'operation',
+      key: 'operation',
+    },
+  ];
+
+  interface innerDataItem {
+    key: number;
+    date: string;
+    name: string;
+    upgradeNum: string;
+  }
+
+  const innerData: innerDataItem[] = [];
+  for (let i = 0; i < 3; ++i) {
+    innerData.push({
+      key: i,
+      date: '2014-12-24 23:12:00',
+      name: 'This is production name',
+      upgradeNum: 'Upgraded: 56',
+    });
+  }
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      // 列表页面公共参数、方法
+      const { tableContext } = useListPage({
+        tableProps: {
+          title: '内嵌表格',
+          dataSource: data,
+          columns: columns,
+          showActionColumn: false,
+          rowKey: 'key',
+          useSearchForm: false,
+        },
+      });
+      //注册table数据
+      const [registerTable] = tableContext;
+      return {
+        data,
+        columns,
+        innerColumns,
+        innerData,
+        registerTable,
+      };
+    },
+  });
+</script>