自定义Naive UI的数据表格Data Table中按钮Button图标
在Naive UI官网中详细介绍了[数据表格 Data Table](数据表格 Data Table - Naive UI)的使用方式，支持我们在表格中放入按钮Button，进行更多的操作。
{
title: "Action",
key: "actions",
render(row) {
return h(
NButton,
{
strong: true,
tertiary: true,
size: "small",
onClick: () => play(row),
},
{ default: () => "Play" }
);
},
},
|
根据案例可知default是设置文字的，在[Button](按钮 Button - Naive UI)的Slot中还有一个icon，这个就是自定义按钮图标的
| 名称 |
参数 |
说明 |
| default |
() |
按钮的内容 |
| icon |
() |
按钮的图标 |
使用方法如下：原文：sw-code
<template>
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
:bordered="false"
/>
</template>
<script>
import { h, defineComponent } from 'vue'
import { NButton } from 'naive-ui'
import { DeleteFilled } from '@vicons/antd'
const createColumns = ({ checkRow, deleteItem }) => {
return [
{
title: "操作",
key: "actions",
align: "center",
width: "200",
render(row) {
return [
h(
NButton,
{
strong: true,
tertiary: true,
size: "small",
onClick: () => checkRow(row),
},
{ default: () => "Check" }
),
h(
NButton,
{
quaternary: true,
circle: true,
size: "small",
style: {
marginLeft: "20px",
},
onClick: () => deleteItem(row),
},
{ icon: () => h(NIcon, null, { default: () => h(DeleteFilled) }) }
),
];
},
},
];
};
export default defineComponent({
setup() {
return {
data: null,
columns: createColumns({
checkRow(row) {
console.log(row)
},
deleteItem(row) {
console.log(row)
}
}),
pagination: false
}
},
});
</script>
<style lang="scss" scoped>
</style>
|