<template>
<NDataTable
:columns="columns"
/>
</template>
<script setup lang="ts">
import {NDataTable,NPopconfirm} from 'naive-ui'
const columns: DataTableColumn[] = [
{
title: '操作',
key: 'action',
align: 'center',
render(row: any) {
return [
h(
NPopconfirm,
{
// 设置确认按钮样式
positiveButtonProps: {
size: 'tiny',
color: '#007293',
bordered: true
},
// 设置取消按钮样式
negativeButtonProps: {
size: 'tiny',
color: '#007293',
bordered: true
},
// 确认出发事件
onPositiveClick: (e: any) => {
e.stopPropagation()
e.preventDefault()
if (row.id) {
delData(row.id)
}
}
},
{
trigger: () => {
return h(
'span',
{
class: 'table-option-btn'
},
'删除'
)
},
default: () => {
return '确认删除该数据?'
}
}
)
]
}
}
]
ts+vue3+naive ui