标签：return 自定义 default Data Naive UI true row

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。