自定义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
,这个就是自定义按钮图标的
名称 | 参数 | 说明 |
---|---|---|
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>
自定义Naive UI的数据表格Data Table中按钮Button图标的更多相关文章
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- JQuery Easy Ui dataGrid 数据表格
数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...
- R︱高效数据操作——data.table包(实战心得、dplyr对比、key灵活用法、数据合并)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于业务中接触的数据量很大,于是不得不转战开始 ...
- data.table 中的动态作用域
data.table 中最常用的语法就是 data[i, j, by],其中 i.j 和 by 都是在动态作用域中被计算的.换句话说,我们不仅可以直接使用列,也可以提前定义诸如 .N ..I 和 .S ...
- vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案
vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...
- JQuery Easy Ui dataGrid 数据表格 -->转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...
- 数据表格 layui.table
layui官网-表单 自动渲染 方法渲染 table.render,cols中的field是后台传递的data map.put("data",stuService.selectSt ...
- 在 Symfony Command中自定义脚本把Excel数据导入到数据库中
// 注:只是在此做下记录,有兴趣的可以参考,不做实际教程文档 <?php/** * Created by IntelliJ IDEA. * User: davis * Date: 2019-0 ...
- kendo ui - grid 数据表格系列
kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...
- 【UI】数据表格设计
https://www.smashingmagazine.com/2019/02/complex-web-tables/ https://www.smashingmagazine.com/2019/0 ...
随机推荐
- C 多维数组、特殊字符和字符串函数详解
C 多维数组 数组,也称为单维数组.这些非常棒,是您在 C 语言编程中会经常使用的东西.然而,如果您想要将数据存储为表格形式,例如带有行和列的表格,则需要熟悉多维数组. 二维数组 二维数组也称为矩阵, ...
- js es6 Iterator
1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...
- 什么是ip协议二
前言 续前面一章. 正文 看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...
- 《c#高级编程》第4章C#4.0中的更改(八)——协变和逆变
一.协变 C#协变是指在一些特定的情况下,可以将一个派生类型的实例赋值给其基类或接口类型的引用.这里的"派生类型"指的是从某个基类或接口继承并增加了新的成员的类型. C# 4.0 ...
- async与await暂停作用
1. async function Request () { await new Promise(res => { setTimeout(() => { console.log(1) re ...
- gitee基于webhooks实现前端简单自动化部署
1.为什么采用自动化部署 简而言之,程序员优秀传统:懒 =>高级生产力. 基于gitee进行的自动化部署,服务器环境为Ubuntu 基于webhooks进行的自动化部署更加轻快便捷 2.部署步骤 ...
- 力扣119(java)-杨辉三角Ⅱ(简单)
题目: 给定一个非负索引 rowIndex,返回「杨辉三角」的第 rowIndex 行. 在「杨辉三角」中,每个数是它左上方和右上方的数的和. 示例 1: 输入: rowIndex = 3输出: [1 ...
- 力扣915(java&python)-分割数组(中等)
题目: 给定一个数组 nums ,将其划分为两个连续子数组 left 和 right, 使得: left 中的每个元素都小于或等于 right 中的每个元素.left 和 right 都是非空的.le ...
- 阿里云 ACK 容器服务生产级可观测体系建设实践
简介: 随着容器被越来越对企业接纳与落地,可观测成为重点.那么,让我们深入了解阿里云 ACK 容器服务生产级可观测体系建设实践,为自身业务可观测提供参考- 作者:冯诗淳(行疾) ACK 可观测体系 ...
- 如何在 Anolis 8上部署 Nydus 镜像加速方案?
简介: 手把手教你在 Anolis OS 上部署 Nydus! 在上一篇文章中详细介绍Anolis OS 是首个原生支持镜像加速 Linux 内核,Nydus 镜像加速服务重新优化了现有的 OCIv1 ...