vue项目封装table组件思路整理

柯里极昼
• 阅读 6519

为什么需要封装table组件?

后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改、便于后期维护。如给table内容展示,超出单元格以省略号展示等。

怎么封装table组件?

table组件具有的功能/特点有:
  1. table列由父组件动态创建
  2. table列类型包含:序列行、复选列、普通数据展示列、单元格根据父组件要求动态渲染列(如,操作列为button,状态列展示switch标签等)
  3. table分页功能
怎样实现table组件并完成功能/特点:
  1. 选择render函数还是template实现组件:render函数无法监听组件自定义事件,且标签层级不如template清晰,所以采用template封装。

    注:render函数一般用于标签层级少,偏重逻辑封装的组件。如封装input框等。template用于组件n次封装,最后一层供用户使用封装,标签结构清晰,逻辑处理少。
  2. table列渲染:父组件传递列配置动态渲染列。包含实现序列和复选列的动态渲染,根据列配置的type决定。
  3. 分页功能实现:传递分页配置,table组件判断是否展示分页,以及分页的相关配置,如total等。
  4. 动态渲染单元格——以element-ui为例:

    1. 为table-column.js组件接收renderCell自定义属性
    2. 为table-column.js组件column添加renderCell属性。再table-column.js渲染单元格时调用的为column.renderCell
    3. 引用table-column.js,用自定义table-column.js的el-table-column组件即可。
    4. 父组件传递给table-column.js的renderCell属性,renderCell方法为父组件动态渲染单元格内容
      vue项目封装table组件思路整理
      vue项目封装table组件思路整理
      vue项目封装table组件思路整理
点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Easter79 Easter79
4年前
sqlserver锁表处理
1.模拟锁表//建立模拟表 CREATE   TABLE  Lock1(C1  int   default ( 0 )); CREATE   TABLE  Lock2(C1  int   default ( 0 )); INSERT   INTO  Lock1  VALUES ( 1 ); INSE
Chase620 Chase620
4年前
Vue组件(30)封装一下数据列表的控件
UI库的table好像前端喜欢叫table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。功能锁定行列(UI库自带)多选(整理)
Wesley13 Wesley13
4年前
LINUX打开文件
<htmlxmlns"http://www.w3.org/1999/xhtml"<head<stylebody,table{fontfamily:微软雅黑;fontsize:10pt}table{bordercollapse:collapse;border:solidgray;borderwidth:2px0
Wesley13 Wesley13
4年前
UI组件
需求:Elementui的Table组件自带合计行,但是需求需要在合计行的某些单元格有特别的样式以及事件,没有研究出怎么在既有合计行上完成此需求,于是利用其原本的一些属性完成自定义合计行.分析:在Table组件中是有columns(包含所有列的数据的数组)的,但是只有在summarymethod事件中才暴露出来,用来自定
Wesley13 Wesley13
4年前
Java SQL基础
SQL基础1、DataBase创建:CREATEDATABASEDATABASE\_NAME ;使用:USEDATABASE\_NAME;删除:DROPDATABASEDATABASE\_NAME;2、Table创建CREATET
Wesley13 Wesley13
4年前
LINUX中文件描述符传递
<htmlxmlns"http://www.w3.org/1999/xhtml"<head<stylebody,table{fontfamily:微软雅黑;fontsize:10pt}table{bordercollapse:collapse;border:solidgray;borderwidth:2px0
Stella981 Stella981
4年前
Merge Into 语法
mergeinto根据查询数据对已存在的表中数据执行删除、修改、新增操作,在实际应用中非常实用,可以减少insert、update、delete的书写。基本语法:merge into table_name tn using (select column_name,... from table_name ) tmp on tn.条件tm
Wesley13 Wesley13
4年前
mysql select将多个字段横向合拼到一个字段
表模式:CREATE TABLE tbl_user (  id int(11) NOT NULL AUTO_INCREMENT,  name varchar(255) DEFAULT NULL,  age int(11) DEFAULT NULL,  PRIMARY KEY (id)
Wesley13 Wesley13
4年前
HTML表格的基本结构标记
<table标记1.基本格式:<table属性1"属性值1"属性2"属性值2"......表格内容</table2.table标记的属性  width属性  表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分比(%)  height属性  表示表格的高度,他的值可以是像素(px
柯里极昼
柯里极昼
Lv1
忽如一夜春风来,千树万树梨花开。
文章
4
粉丝
0
获赞
0