自定义Naive UI的数据表格Data Table中按钮Button图标

在Naive UI官网中详细介绍了[数据表格 Data Table](数据表格 Data Table - Naive UI)的使用方式

{
	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，这个就是自定义按钮图标的

使用方法如下 原文：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>

标签：return,自定义,default,Data,Naive,UI,true,row
来源： https://www.cnblogs.com/sw-code/p/16396410.html