naive-ui-admin/src/views/comp/table/columns.ts

import { h } from 'vue'
import { NAvatar, NButton } from 'naive-ui'

export const columns = [
  {
    title: 'id',
    key: 'id'
  },
  {
    title: '名称',
    key: 'name'
  },
  {
    title: '头像',
    key: 'avatar',
    render(row) {
      return h(
        NAvatar,
        {
          size: 48,
          src: row.avatar
        }
      )
    }
  },
  {
    title: '地址',
    key: 'address'
  },
  {
    title: '开始日期',
    key: 'beginTime',
  },
  {
    title: '结束日期',
    key: 'endTime',
  },
  {
    title: '创建时间',
    key: 'date',
  },
  {
    title: '操作',
    key: 'actions',
    width:150,
    //简单写一下例子，不建议这么写，过段时间，这里封二次封装
    render() {
      return [
        h(
            NButton,
            {
              size: 'small',
              type:'error',
              style:'margin-right:10px',
              onClick: () => {
              }
            },
            { default: () => '删除' }
        ),
        h(
            NButton,
            {
              size: 'small',
              onClick: () => {
              }
            },
            { default: () => '编辑' }
        )
      ]
    }
  }
]