To Be Simple，基于elementUI的功能扩展组件系列1之Table篇

superPershing 发布于2019-08-23 18:02 / 1706人阅读

摘要：项目地址前言结合日常开发，封装常用功能，提高开发效率。通用显示效果支持类型类型文本链接文档图片用法相关属性属性参数说明类型可选值默认值动画效果的列的配置对象，更多细节请参见列属性。

项目地址：tbs-ve-template

前言

结合日常开发，封装常用功能，提高开发效率。让程序猿兄弟姐妹们也有时间约约女票，逗逗男票，做做自己想做的事情，不要天天在办公室造轮子！

1.通用Table

思路

类似easy-ui的table加载方式

环境简述

开发框架:基于vue-admin-template

github:https://github.com/PanJiaChen...

JS 包管理工具: Yarn

安装方法：https://www.cnblogs.com/xiang...

项目启动:
第一步：yarn install 下载所有依赖包
第二步：yarn run dev 下载所有依赖包
第三步：访问http://localhost:9528

项目结构

说明：为了避免代码过长不易浏览，讲vue代码与js代码分开编辑。

1. 通用Table 显示效果

支持类型

类型：文本 | 链接 | 文档 | 图片

用法

相关属性
Table 属性:

参数	说明	类型	可选值	默认值
listLoading	动画效果	boolean	—	true
columns	table 的列（column）的配置对象，更多细节请参见列（column）属性。	array	—	—
ui	table显示效果的配置对象，更多细节请参见列（ui）属性	array	—	—
data	显示数据集合，一般从远程获取数据后进行赋值	array	—	—
page	table分页配置对象，更多细节请参见列（page）属性	array	—	—

Table列（Column）属性:

参数	说明	类型	可选值	默认值
label	列的标题文本	string	—	—
field	列的字段名,与data属性中的名称对应	string	—	—
width	列的宽度	number	—	—
showtype	列的类型，normal：为文本类型	string	normal、http、file、image	normal
filter	过滤器，类似easyui中formatter属性，用于格式数据	string	—	—

Table样式（ui）属性:

参数	说明	类型	可选值	默认值
tableHeight	Table高	string、number	—	—
tableWidth	Table宽度	string、number	—	—

Table分页（page）属性:

参数	说明	类型	可选值	默认值
total	总条目数	number	—	—
listQuery	分页参数，listQuery：{ page：当前页码，limit:每页条目数 }	number	—	—

有问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

QQ: 375766253

邮件:375766253@qq.com

云服务器 GPU云服务器之基础篇云计算系列服务器篇系列之系列之二

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104552.html

数据驱动，快速开发组件（ElementUI篇）

摘要：基于这种思路，那留给我们的只有两步，组件设计和数据设计。关于组件的相关逻辑，可能要在文章里面一次性说清楚，还是需要费很大的精力，不过希望数据驱动的思想能够让之前没有体会到这种开发乐趣的小伙伴们有到新的想法。在日常开发中，我们肯定不止一次碰到重复的业务代码，明明功能相似，但总没思路去把它封装成组件。关于封装组件，希望这篇文章能带给大家新的思路，去更高效的完成日常开发。（注：例子都是基于...

enrecul101 2019-08-26 13:39 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 评论0 收藏0