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

  1. {
  2. title: "Action",
  3. key: "actions",
  4. render(row) {
  5. return h(
  6. NButton,
  7. {
  8. strong: true,
  9. tertiary: true,
  10. size: "small",
  11. onClick: () => play(row),
  12. },
  13. { default: () => "Play" }
  14. );
  15. },
  16. },

根据案例可知default是设置文字的,在[Button](按钮 Button - Naive UI)的Slot中还有一个icon,这个就是自定义按钮图标的

名称 参数 说明
default () 按钮的内容
icon () 按钮的图标

使用方法如下 原文:sw-code

  1. <template>
  2. <n-data-table
  3. :columns="columns"
  4. :data="data"
  5. :pagination="pagination"
  6. :bordered="false"
  7. />
  8. </template>
  9. <script>
  10. import { h, defineComponent } from 'vue'
  11. import { NButton } from 'naive-ui'
  12. import { DeleteFilled } from '@vicons/antd'
  13. const createColumns = ({ checkRow, deleteItem }) => {
  14. return [
  15. {
  16. title: "操作",
  17. key: "actions",
  18. align: "center",
  19. width: "200",
  20. render(row) {
  21. return [
  22. h(
  23. NButton,
  24. {
  25. strong: true,
  26. tertiary: true,
  27. size: "small",
  28. onClick: () => checkRow(row),
  29. },
  30. { default: () => "Check" }
  31. ),
  32. h(
  33. NButton,
  34. {
  35. quaternary: true,
  36. circle: true,
  37. size: "small",
  38. style: {
  39. marginLeft: "20px",
  40. },
  41. onClick: () => deleteItem(row),
  42. },
  43. { icon: () => h(NIcon, null, { default: () => h(DeleteFilled) }) }
  44. ),
  45. ];
  46. },
  47. },
  48. ];
  49. };
  50. export default defineComponent({
  51. setup() {
  52. return {
  53. data: null,
  54. columns: createColumns({
  55. checkRow(row) {
  56. console.log(row)
  57. },
  58. deleteItem(row) {
  59. console.log(row)
  60. }
  61. }),
  62. pagination: false
  63. }
  64. },
  65. });
  66. </script>
  67. <style lang="scss" scoped>
  68. </style>

自定义Naive UI的数据表格Data Table中按钮Button图标的更多相关文章

  1. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  2. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

  3. R︱高效数据操作——data.table包(实战心得、dplyr对比、key灵活用法、数据合并)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于业务中接触的数据量很大,于是不得不转战开始 ...

  4. data.table 中的动态作用域

    data.table 中最常用的语法就是 data[i, j, by],其中 i.j 和 by 都是在动态作用域中被计算的.换句话说,我们不仅可以直接使用列,也可以提前定义诸如 .N ..I 和 .S ...

  5. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

  6. JQuery Easy Ui dataGrid 数据表格 -->转

    转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...

  7. 数据表格 layui.table

    layui官网-表单 自动渲染 方法渲染 table.render,cols中的field是后台传递的data map.put("data",stuService.selectSt ...

  8. 在 Symfony Command中自定义脚本把Excel数据导入到数据库中

    // 注:只是在此做下记录,有兴趣的可以参考,不做实际教程文档 <?php/** * Created by IntelliJ IDEA. * User: davis * Date: 2019-0 ...

  9. kendo ui - grid 数据表格系列

    kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...

  10. 【UI】数据表格设计

    https://www.smashingmagazine.com/2019/02/complex-web-tables/ https://www.smashingmagazine.com/2019/0 ...

随机推荐

  1. C 多维数组、特殊字符和字符串函数详解

    C 多维数组 数组,也称为单维数组.这些非常棒,是您在 C 语言编程中会经常使用的东西.然而,如果您想要将数据存储为表格形式,例如带有行和列的表格,则需要熟悉多维数组. 二维数组 二维数组也称为矩阵, ...

  2. js es6 Iterator

    1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...

  3. 什么是ip协议二

    前言 续前面一章. 正文 看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...

  4. 《c#高级编程》第4章C#4.0中的更改(八)——协变和逆变

    一.协变 C#协变是指在一些特定的情况下,可以将一个派生类型的实例赋值给其基类或接口类型的引用.这里的"派生类型"指的是从某个基类或接口继承并增加了新的成员的类型. C# 4.0 ...

  5. async与await暂停作用

    1. async function Request () { await new Promise(res => { setTimeout(() => { console.log(1) re ...

  6. gitee基于webhooks实现前端简单自动化部署

    1.为什么采用自动化部署 简而言之,程序员优秀传统:懒 =>高级生产力. 基于gitee进行的自动化部署,服务器环境为Ubuntu 基于webhooks进行的自动化部署更加轻快便捷 2.部署步骤 ...

  7. 力扣119(java)-杨辉三角Ⅱ(简单)

    题目: 给定一个非负索引 rowIndex,返回「杨辉三角」的第 rowIndex 行. 在「杨辉三角」中,每个数是它左上方和右上方的数的和. 示例 1: 输入: rowIndex = 3输出: [1 ...

  8. 力扣915(java&python)-分割数组(中等)

    题目: 给定一个数组 nums ,将其划分为两个连续子数组 left 和 right, 使得: left 中的每个元素都小于或等于 right 中的每个元素.left 和 right 都是非空的.le ...

  9. 阿里云 ACK 容器服务生产级可观测体系建设实践

    简介: 随着容器被越来越对企业接纳与落地,可观测成为重点.那么,让我们深入了解阿里云 ACK 容器服务生产级可观测体系建设实践,为自身业务可观测提供参考- 作者:冯诗淳(行疾)   ACK 可观测体系 ...

  10. 如何在 Anolis 8上部署 Nydus 镜像加速方案?

    简介: 手把手教你在 Anolis OS 上部署 Nydus! 在上一篇文章中详细介绍Anolis OS 是首个原生支持镜像加速 Linux 内核,Nydus 镜像加速服务重新优化了现有的 OCIv1 ...