feat：添加组件实例

src/views/examples/table/post/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="action-btns">
+      <n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
+    </div>
+    <n-data-table
+      mt-20
+      :loading="loading"
+      :scroll-x="1600"
+      :data="tableData"
+      :columns="columns"
+      :pagination="pagination"
+      :row-key="(row) => row.id"
+      max-height="calc(100vh - 260px)"
+      @update:checked-row-keys="handleCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getTableData, createColumns } from './post-table'
+
+const router = useRouter()
+
+// 静态变量
+const columns = createColumns({
+  handleDelete,
+  handleRecommend,
+  handlePublish,
+})
+
+// refs
+let tableData = ref([])
+let pagination = ref({ pageSize: 10 })
+let loading = ref(false)
+
+// 钩子函数
+onBeforeMount(() => {
+  initTableData()
+})
+
+// fns
+async function initTableData() {
+  loading.value = true
+  tableData.value = await getTableData()
+  loading.value = false
+}
+
+function handleCreate() {
+  router.push('/example/table/post-create')
+}
+
+function handleDelete(row) {
+  if (row && row.id) {
+    $dialog.confirm({
+      content: '确定删除？',
+      confirm() {
+        $message.success('删除成功')
+        initTableData()
+      },
+      cancel() {
+        $message.success('已取消')
+      },
+    })
+  }
+}
+
+async function handleRecommend(row) {
+  if (row && row.id) {
+    row.recommending = true
+    setTimeout(() => {
+      $message.success(row.isRecommend ? '已取消推荐' : '已推荐')
+      row.recommending = false
+    }, 800)
+  }
+}
+
+async function handlePublish(row) {
+  if (row && row.id) {
+    row.publishing = true
+    setTimeout(() => {
+      $message.success(row.isPublish ? '已取消推荐' : '已推荐')
+      row.publishing = false
+    }, 800)
+  }
+}
+
+function handleCheck(rowKeys) {}
+</script>
+
+<style lang="scss" scoped>
+.action-btns {
+  display: flex;
+}
+</style>