基础表格 #

<script setup lang="ts">
import type { DataTableColumns } from 'naive-ui'
import { NButton, NSwitch } from 'naive-ui'
import dayjs from 'dayjs'
import api from './api'

interface RowData {
  id: number
  title: string
  category: string
  description: string
  author: string
  createDate: string
  updateDate: string
  isPublish: boolean
  publishing: boolean
}
const columns: DataTableColumns<RowData> = [
  { type: 'selection', width: 60 },
  { title: '标题', key: 'title', width: 160 },
  { title: '分类', key: 'category', width: 100 },
  {
    title: '最后更新时间',
    key: 'updateDate',
    width: 180,
    render(row) {
      return h('span', dayjs().format('YYYY-MM-DD HH:mm:ss'))
    },
  },
  {
    title: '发布',
    key: 'isPublish',
    width: 100,
    align: 'center',
    render(row) {
      return h(NSwitch, {
        size: 'small',
        rubberBand: false,
        value: row.isPublish,
        loading: row.publishing,
        onUpdateValue: () => handlePublish(row),
      })
    },
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    width: 100,
    render(row) {
      return h(
        NButton,
        {
          size: 'small',
          type: 'error',
          onClick: () => handleDelete(row),
        },
        { default: () => '删除' }
      )
    },
  },
]
const pagination = reactive({ pageSize: 10 })
const loading = ref<boolean>(false)
const tableData = ref([])

initTableData()

async function initTableData() {
  loading.value = true
  try {
    const res = await api.getPosts()
    tableData.value = res.data
  } catch (error) {
    console.error(error)
    tableData.value = []
  }

  loading.value = false
}

function handlePublish(row: RowData) {
  row.publishing = true
  setTimeout(() => {
    row.isPublish = !row.isPublish
    row.publishing = false
  }, 1000)
}
function handleDelete(row: RowData) {
  if (!row.id) return
}
</script>

<template>
  <n-data-table
    :columns="columns"
    :row-key="(row:RowData) => row.id"
    :data="tableData"
    :pagination="pagination"
    :single-line="false"
    :loading="loading"
  />
</template>