mod: 修改table示例的写法

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

@@ -19,75 +19,26 @@
 <script setup>
 import { ref, onBeforeMount } from 'vue'
 import { useRouter } from 'vue-router'
-
+import { usePostTable } from './usePostTable'
-import { getTableData, createColumns } from './post-table'
 
 const router = useRouter()
 
-// 静态变量
+const pagination = ref({ pageSize: 10 })
-const columns = createColumns({
+const { loading, columns, tableData, initColumns, initTableData } = usePostTable()
-  handleDelete,
-  handleRecommend,
-  handlePublish,
-})
 
-// refs
-let tableData = ref([])
-let pagination = ref({ pageSize: 10 })
-let loading = ref(false)
-
-// 钩子函数
 onBeforeMount(() => {
+  initColumns()
   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) {
+function handleCheck(rowKeys) {
-  if (row && row.id) {
+  $message.info(`选中${rowKeys.join(' ')}`)
-    $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>

src/views/examples/table/post/post-table.js

@@ -1,99 +0,0 @@
-import { h } from 'vue'
-import { NButton, NSwitch } from 'naive-ui'
-import { getPosts } from '@/api/post'
-import { formatDateTime } from '@/utils'
-
-export async function getTableData() {
-  try {
-    const res = await getPosts()
-    if (res.code === 0) {
-      return res.data
-    }
-    console.warn(res.message)
-    return []
-  } catch (error) {
-    console.error(error)
-    return []
-  }
-}
-
-export function createColumns({ handleDelete, handleRecommend, handlePublish }) {
-  return [
-    { type: 'selection' },
-    { title: '标题', key: 'title', width: 150 },
-    { title: '分类', key: 'category', width: 80 },
-    {
-      title: '描述',
-      key: 'description',
-      width: 200,
-    },
-    { title: '创建人', key: 'author', width: 80 },
-    {
-      title: '创建时间',
-      key: 'createDate',
-      width: 150,
-      render(row) {
-        return h('span', formatDateTime(row['createDate']))
-      },
-    },
-    {
-      title: '最后更新时间',
-      key: 'updateDate',
-      width: 150,
-      render(row) {
-        return h('span', formatDateTime(row['updateDate']))
-      },
-    },
-    {
-      title: '推荐',
-      key: 'isRecommend',
-      width: 100,
-      align: 'center',
-      fixed: 'right',
-      render(row) {
-        return h(NSwitch, {
-          size: 'small',
-          defaultValue: row['isRecommend'],
-          loading: !!row.recommending,
-          onUpdateValue: () => handleRecommend(row),
-        })
-      },
-    },
-    {
-      title: '发布',
-      key: 'isPublish',
-      width: 100,
-      align: 'center',
-      fixed: 'right',
-      render(row) {
-        return h(NSwitch, {
-          size: 'small',
-          defaultValue: row['isPublish'],
-          loading: !!row.publishing,
-          onUpdateValue: () => handlePublish(row),
-        })
-      },
-    },
-    {
-      title: '操作',
-      key: 'actions',
-      width: 120,
-      align: 'center',
-      fixed: 'right',
-      render(row) {
-        return [
-          h(
-            NButton,
-            {
-              size: 'small',
-              type: 'error',
-              style: 'margin-left: 15px;',
-              onClick: () => handleDelete(row),
-            },
-            { default: () => '删除' }
-          ),
-        ]
-      },
-    },
-  ]
-}

src/views/examples/table/post/usePostTable.js

@@ -0,0 +1,155 @@
+import { h, ref } from 'vue'
+import { NButton, NSwitch } from 'naive-ui'
+import { getPosts } from '@/api/post'
+import { formatDateTime } from '@/utils'
+
+export const usePostTable = () => {
+  // refs
+  const loading = ref(false)
+  const tableData = ref([])
+  const columns = ref([])
+
+  async function initTableData() {
+    loading.value = true
+    tableData.value = await getTableData()
+    loading.value = false
+  }
+
+  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 initColumns() {
+    columns.value = [
+      { type: 'selection' },
+      { title: '标题', key: 'title', width: 150 },
+      { title: '分类', key: 'category', width: 80 },
+      {
+        title: '描述',
+        key: 'description',
+        width: 200,
+      },
+      { title: '创建人', key: 'author', width: 80 },
+      {
+        title: '创建时间',
+        key: 'createDate',
+        width: 150,
+        render(row) {
+          return h('span', formatDateTime(row['createDate']))
+        },
+      },
+      {
+        title: '最后更新时间',
+        key: 'updateDate',
+        width: 150,
+        render(row) {
+          return h('span', formatDateTime(row['updateDate']))
+        },
+      },
+      {
+        title: '推荐',
+        key: 'isRecommend',
+        width: 100,
+        align: 'center',
+        fixed: 'right',
+        render(row) {
+          return h(NSwitch, {
+            size: 'small',
+            defaultValue: row['isRecommend'],
+            loading: !!row.recommending,
+            onUpdateValue: () => handleRecommend(row),
+          })
+        },
+      },
+      {
+        title: '发布',
+        key: 'isPublish',
+        width: 100,
+        align: 'center',
+        fixed: 'right',
+        render(row) {
+          return h(NSwitch, {
+            size: 'small',
+            defaultValue: row['isPublish'],
+            loading: !!row.publishing,
+            onUpdateValue: () => handlePublish(row),
+          })
+        },
+      },
+      {
+        title: '操作',
+        key: 'actions',
+        width: 120,
+        align: 'center',
+        fixed: 'right',
+        render(row) {
+          return [
+            h(
+              NButton,
+              {
+                size: 'small',
+                type: 'error',
+                style: 'margin-left: 15px;',
+                onClick: () => handleDelete(row),
+              },
+              { default: () => '删除' }
+            ),
+          ]
+        },
+      },
+    ]
+  }
+
+  async function getTableData() {
+    try {
+      const res = await getPosts()
+      if (res.code === 0) {
+        return res.data
+      }
+      console.warn(res.message)
+      return []
+    } catch (error) {
+      console.error(error)
+      return []
+    }
+  }
+
+  return {
+    loading,
+    columns,
+    tableData,
+    initColumns,
+    initTableData,
+  }
+}