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

jiezi

5 年前

项目地址：tbs-ve-template

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

类似 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 代码分开编辑。

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

相关属性
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	—	—

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

前言