首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【通用组件】高效生成 antd Table 组件的操作列

源码 TableOption 组件源码 背景 业务中台重构后,新的框架基于 antd 整套生态,采用声明式的设计思路,可以通过 JSON 的方式快速构建 CRUD 页面的查询表单、Table 表格、新增编辑表单...但每次定义 Table 的操作列时,都要写一大堆重复的“模板代码”,一来效率低,二来不便于通过交互细节,故对这个场景进行抽象封装,整理成一个通过组件 如上图,没有封装组件之前,每次都要重复写以下类似的...增加 onAsyncClick 回调函数,如果使用该函数,并且有异步操作的话,按钮自动管理 loading 效果的开或关 PopconfirmBtn 组合 Popconfirm 和 Button 两个组件...,定义配置项,实现 JSON 生成需要二次确认的按钮的效果 DropdownBtn 组合 Dropdown 和 Button 两个组件,定义配置项,实现 JSON 生成下拉菜单的按钮 TableOption...自定义操作列按钮,整理上面几种类型的按钮,通过 JSON 声明式生成对应组件

1.9K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于业务沉淀组件 => manage-table

    在开发cms后台的过程中,最最常用的应该就是Table了,例如 antd的table:图片 这应该是最最常用的开发后台管理系统中使用到的组件了,没有个Table,都不好意思说是个cms系统。...实现首先,既然是antd的Table组件,我们肯定是要基于现有的功能去实现这个需求,所以我们需要在Table组件的基础上套一层,既不能影响Table的展示,同时还能够定制展示列。...对Table的封装进行了二次修改,在不影响之前的使用方式的基础上,增加了对分组的能力支持,我可真TM棒!...这么说来,还是封装成一个npm包吧,等我会,我给你们发布成一个组件包,你们直接安装使用即可。npm i manage-table复制代码尽管拿去用吧。...使用安装npm i manage-tableoryarn add manage-table复制代码manage-table组件有对应的peerDependencies,如果没有安装的话,需要手动安装一下对应的依赖

    72720

    前端: 如何让你的Table组件无限可能

    在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧, 让前端开发不再吃力...组件. ?...实现简单的 Table 编辑器 实现 Table 编辑器其实笔者在 前端如何一键生成多维度数据可视化分析报表 已经详细分析过了,也集成在了H5-Dooring 的可视化组件编辑器中, 具体 demo 如下...最后 目前笔者也在持续更新H5编辑器 H5-Dooring, 最近来同步一下功能: 修复图片库选择bug 添加省市级联组件 添加批量导入 excel 数据的能力 添加表单自定义校验 音频组件添加自动播放控制..., 循环播放等配置项 添加横向滑动组件

    1.5K10

    如何用JS写一个table组件 | 作业讲解

    一个组件可以说它是一个JS模块,但一个JS模块,却未必是一个组件。...这是因为但凡组件无论大小都是要实现页面上的一个功能,而一个完备的功能却会有好几个功能点、判断、方法来组件,这些东西是不能写在一个函数里的,而要拆分为好多函数、方法。...所以你会看到一个组件里面包含了许多函数、方法或是许多JS文件。 这就引出下一个问题,组件的组织。也就是单一功能的再细分,用笔先写出一个个的点。。...就说这个 table组件吧, --自定义行; --自定义列; --自定义左侧是否有单选按钮; --自定义右侧是否有删除按钮; --自定义每行是否可展开下拉; --自定义每列标题是否有下拉按钮; --自定义表头标题...createTableUI(config) 然后createTableUI的伪代码: createTableUI(c){ var config = $.extend(true,{},c); var tab = $('<table

    4.5K50

    测试需求平台13-Table组件应用产品列表优化

    组件 在数据展示、分析整理、操作处理场景中最常用的就是Table表格,它是用行列的形式,结构化展示信息的组件;方便用户查看、分析数据。...2.1 组件构成 参考办公软件Excel在做数据表的时候(表头、行、列)格式,对应一个展示Table便有如下构成: 表头 :说明这一列的信息类别,也可以在表头放置一些排序、筛选等操作按钮。... 2.2 组件类型 作为数据展示最常用的组件,从样式来和使用场景来说,ArcoDesgin 提供了多种类型 基础表格...2.4 属性API 表格Table可以看作是一个综合且相对负责的组件,因此会有更多的功能、属性、方法等供我们组合使用来达到不同需求,如下图左侧列出了很多参考,在使用时候可以以基本模版为地基,逐项增加配置项...https://arco.design/vue/component/table#API Props 表属性 columns:表格的列定义 - TableColumnData[] 类型

    20210

    【Vue】View UI(原iView)的Table组件的render函数

    在View UI中,表格组件Table是一个常用组件,表格组件重要的元素是列columns,如果仅仅是单调的纯文本功能展示,那么在使用组件时,在columns中定义好映射就算完成了。...某一列渲染一个可以放大的图片 某一列渲染一个可操作的按钮 某一列渲染一个好看的头像 某一列渲染标签 以上种种操作就需要配合单元格(也称作为columns数据的项)的渲染函数render,自定义渲染当前列,包括 渲染自定义组件...原生的html标签 View UI组件 render 函数传入两个参数: 第一个是 h 第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。...}, }, '直播地址' ) } 2.渲染可操作的按钮 这里按钮是用的View UI的按钮Button组件...,所以这里的使用范畴就是渲染组件

    1.1K20

    时间选择器组件之关于table走过的弯路

    为了提高开发者的研发效率,提升产品品质,我们提供一套基于饿了么UI实现的UI组件库,TMAP-UI---旨在解决的组件地图场景下应用的问题。...最近在新增TMAP-UI组件库的开发过程中,时间选择器是开发者反馈需求较多的一个组件,今天把在开发过程中遇到的一些问题分析给大家。...element-ui有原生的时间选择器,但是,在我们的交互设计师是根据地图实际应用场景中的特性抽象组件,element-ui的样式以及交互操作都无法满足设计需求,需要基于源码进行二次开发,最小成本实现这个通用组件...今天主要聊下开发中遇到的一些关于table的实现问题,对table一探究竟… 关于table特点 首先,我们先来基本了解一下table。...[o9d1ew0q94.png] 产品推广 地图组件是专为移动端定制的轻应用产品,支持各手机端主流浏览器,可以实现位置展示、路线规划、地图选点、前端定位等多种场景的下的调用。

    1.3K41

    Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    应该是做管理型网站开发的核心组件了,通过 Table 可以衍生出非常多的功能,由于这套组件几乎没有宣传,导致知道的人不是很多,但是很多小伙伴都是使用了其他一些开源 blazor 项目后发现 Table...组件根本无法使用 加载数据太卡 功能缺失太多 那么从今天开始正式介绍一下性能爆炸,操作简单的 BootstrapBlazor 组件库中的最强王者组件 Table,由于功能实在是太多,仅示例目前网站中就有近...这里书写起来就会篇幅非常长,BootstrapBlazor 组件库的 Table 组件有一个属性 AutoGenerateColumns ,当设置其值为 true 时,会根据绑定模型的属性进行自动生成列信息...用 BootstrapBlazor 组件库的 Table 组件开发就是这么简单。...划重点 使用 Table 组件 UI 层面的基本操作均已经封装到组件功能中,开发人员只需要将精力转移到数据库的操作上去,如例子中的 OnQueryAsync 数据查询方法 OnSaveAsync 数据保存方法

    1.7K30

    create table,show tables,describe table,DROP TABLE,ALTER TABLE ,怎么使用?

    2)表本身(非表数据)的基本操作: CREATE TABLE 表名 (列_1_名 列_1_类型 列_1_细节,      列_2_名 列_2_类型 列_2_细节,     ...         );...例如:create table student(id int not null,name char(10),age int); 例如:CREATE TABLE t (id INT NOT NULL,...NOT NULL, first_name CHAR(30) NOT NULL, d DATE NOT NULL);    show tables;显示当前数据库中的Tables describe table_name...;显示table各字段信息 DROP TABLE t; (删除表) DROP TABLE t1, t2, t3;  ALTER TABLE t ADD x INT NOT NULL;(增加一列) ALTER...TABLE t DROP x; (删除y)   3)表数据的基本操作: 添加纪录: INSERT INTO 表名 (列_list) VALUES (值_list);  例如: INSERT INTO

    2K10
    领券