注：
使用此包前，请确认以安装 element-UI
如果使用本组件中 zt-table
请先书写配置文件，如下
在文件中创建 ztConfig.js 文件内容如下
import Vue from 'vue'
import axios from './request'
const config = {
axios // 封装的请求方法
}
// 这里是给组件使用的数据
Vue.prototype.ztConfig= config
| 组件名称 | 相关介绍 (详细在下面有介绍) |
| zt-table | 相当于el-table，在此基础上封装了数据请求，分页，导出功能， |
| zt-table-column | 相当于el-table-column，在此基础上增加居中，超出显示... |
| zt-border-box | 漂亮的边框效果，zt-border-box1、zt-border-bo2、zt-border-box3... |
| zt-back-top | 回到顶部 |
| zt-scroll-table | 使表格数据滚动展示 |
| zt-month-view | 可以展示月份，并可以在某一日添加详细 |
| zt-srcl-spinner | 有转动效果的动图 |
zt-table
效果：
HTML
<zt-table
ref="myTable"
url="请求地址"
border
>
<zt-table>js
获取数据：this.$refs.myTable.get()参数介绍：
url: 必传： 请求的地址，
noPage：是否显示分页，
exportExcel：是否显示导出按钮，
height：表格的高度，
parameter：请求携带的参数，
stripe：隔行变色
rowKey：列表唯一id名称
zt-table可调用的方法：
this.$refs.myTable.dealData(this.tableData) 可以将数据直接给表格进行渲染
this.$refs.myTable.refresh() 刷新数据
this.$refs.myTable.filter(obj) 过滤
zt-table返回方法：
successTable：数据请求成功之后拿到的数据，
select ：当用户手动勾选数据行的 Checkbox 时触发的事件，
selection-change ：当选择项发生变化时会触发该事件
row-click ： 当某一行被点击时会触发该事件
点击某行添加颜色再次点击去除
加入css样式为：
.el-table__body tr.current-row td {
background-color: pink !important;
}
注：如果使用 parameter 传参，请求时参数结构为：
2、如果使用组件 filter 方法 过滤 请求时会将传的参数改成对象，如下
zt-table-column
HTML
<zt-table-column></table-column参数介绍：
其他参数方法可参考 el-table-cloumn
本组件继承 el-table-cloumn 只在此基础上增加 居中 超出隐藏zt-border-box
zt-border-box1
效果：
HTML
<zt-border-box1>BorderBox1</zt-border-box1>参数介绍：
可传参数：
mergedColor：可改变边框的颜色，默认：['#4fd2dd', '#235fa7']
boxHeight：高度 默认200
backgroundColor：盒子背景色，默认透明zt-border-box2
效果：
HTML
<zt-border-box2>BorderBox2</zt-border-box2>参数介绍：
可传参数：
reverse 默认false 展示位置为 第一个
mergedColor：边框颜色
backgroundColor：盒子背景色，默认透明
boxHeight：高度 默认200zt-border-box3
效果：
HTML
<zt-border-box3>BorderBox3</zt-border-box3>参数介绍：
可传参数：
dur：单次动画时长 默认 3
backgroundColor：盒子背景色，默认透明
reverse：动画的方向：默认顺时针
boxHeight：高度 默认200
mergedColor： 默认 ['#235fa7', '#4fd2dd'] 第一个值为边框的颜色，第二个值为 动画的颜色zt-border-box4
效果：
HTML
<zt-border-box4>BorderBox4</zt-border-box4>参数介绍：
可传参数：
backgroundColor： 盒子背景色
boxHeight：高度 默认200
mergedColor：默认['#1d48c4', '#d3e1f8'] 第一个参数为盒子边框内的渐变蓝，第二个为四个角的颜色zt-border-box5
效果：
HTML
<zt-border-box5 title="BorderBox5"></zt-border-box5>参数介绍：
说明：
外面需要把盒子的背景色改为 #282c34 才会出现上面的效果
参数：
title： 标题
titleWidth：标题宽度
backgroundColor：盒子内部颜色，默认透明
mergedColor：默认 ['#8aaafb', '#1f33a2'] 第一个数据为为边框颜色，第二数据为标题背景色
boxHeight：高度 默认200zt-border-box6
效果：
HTML
<zt-border-box6>BorderBox6</zt-border-box6>参数介绍：
可传参数：
backgroundColor：盒子背景色 默认透明
mergedColor：默认['#2e6099', '#7ce7fd'] 第一个数据为四个边框颜色，第二个数据为 四个角的颜色
boxHeight：高度 默认200zt-border-box7
效果：
HTML
<zt-border-box7>BorderBox7</zt-border-box7>参数介绍：
参数：
backgroundColor：盒子背景色 默认透明
mergedColor：默认['#6586ec', '#2cf7fe'] 第一个数据为四个边框颜色，第二个数据为左上与右下的颜色
boxHeight：高度 默认200zt-back-top
HTML
<zt-back-top />参数介绍：
text：鼠标经过时显示的信息
visibilityHeight：被卷去多少是展示返回顶部按钮 默认为 0
backPosition：返回到距离顶部多少的距离 默认为 0
transitionName： 点击之后滚动时的动画
customStyle：返回按钮的配置
默认为：{
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}zt-scroll-table
效果：
HTML
<zt-scroll-table style="width:500px;height:220px" :header="header" :datas="datas"></zt-scroll-table>js
header: ['列1', '列2', '列3'],
datas: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]参数介绍：
datas：展示的数据 数据类型： Array
header: Array 表头，默认为空，没有表头
align： String 文字居中方式，默认居中
index： Boolean 是否显示行号 默认不显示
columnWidth： Array 定制每列的宽度 [100,200,300]
rowNum: Number 展示数据的条数，默认5条
headerBGC：String 表格头部的背景色 默认 #00BAFF
oddRowBGC：String 奇数行背景色 默认 '#003B51'
evenRowBGC：String 偶数行背景色 默认 #0A2732
waitTime： Number 轮播时间间隔（ms） 默认 2000
headerHeight： Number 表格头部高度 默认35
indexText： String 行号表头 默认为 #
carousel： String 轮播方式 默认row 可选 page row:以行进行滚动 page：以页进行滚动
hoverPause： Boolean 鼠标悬浮暂停轮播 默认为true zt-month-view
效果：
HTML
// 在月份的左右两侧 与底部还留有插槽
<zt-month-view
:events="fcEvents"
lang="zh"
@changeMonth="changeMonth"
@eventClick="eventClick"
@dayClick="dayClick"
@moreClick="moreClick"
>
<!-- <div slot="header-left">111</div>
<div slot="header-right">222</div>
<div slot="bottom-card">333</div> -->
</zt-month-view>js
events:[{
title: 'event2',
start: '2016-07-02',
end: '2016-07-03',
cssClass: ['family', 'career'],
YOUR_DATA: {}
}]参数介绍：
title 事件的标题，将显示在日历上
start 活动的开始日
end 活动的结束日
cssClass 是每个事件标签的 css 类，这样，您就可以设置不同的颜色、样式..
YOUR_DATA 您可以定义尽可能多的数据
lang： String 定义显示得语言 默认中文，可选 en、 fr
firstDay: String、Array 定义每周从星期几开始
函数:
1、changeMonth (start , end , current)：点击下个月/上个月的箭头
start是当前月的第一天View（moment对象）
end是当前月的最后一天View（moment对象）
current是当月的第一天（moment对象）
2、eventClick(event , jsEvent , pos) ：点击某一个事件
event 是一个保存事件信息的 Event 对象
jsEvent 持有原生 javascript 事件
pos 是 fc 的相对坐标
3、dayClick(day , jsEvent)： 单击某一天时触发
date是您单击当天的日期对象 ( momentobject)
jsEvent 持有原生 javascript 事件
3、moreClick(date, events, jsEvent)： 当你点击一个more按钮时触发
date是与点击的“更多”（moment对象）对应的日期
events 是在框中的事件列表
jsEvent 持有原生 javascript 事件zt-srcl-spinner
效果：
HTML
<div class='containerBox'>
<zt-srcl-spinner style="width:80%;height:80%;color:red">66%</zt-srcl-spinner>
</div>css
{
width: 180px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
background-color: #212631;
}参数介绍：
参数：
dur： Number 控制旋转的速度 默认为 3zt-scroll-table
效果：
HTML
<zt-scroll-table style="width:500px;height:220px" :header="header" :datas="datas"></zt-scroll-table>js
header: ['列1', '列2', '列3'],
datas: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]参数介绍：
datas：展示的数据 数据类型： Array
header: Array 表头，默认为空，没有表头
align： String 文字居中方式，默认居中
index： Boolean 是否显示行号 默认不显示
columnWidth： Array 定制每列的宽度 [100,200,300]
rowNum: Number 展示数据的条数，默认5条
headerBGC：String 表格头部的背景色 默认 #00BAFF
oddRowBGC：String 奇数行背景色 默认 '#003B51'
evenRowBGC：String 偶数行背景色 默认 #0A2732
waitTime： Number 轮播时间间隔（ms） 默认 2000
headerHeight： Number 表格头部高度 默认35
indexText： String 行号表头 默认为 #
carousel： String 轮播方式 默认row 可选 page row:以行进行滚动 page：以页进行滚动
hoverPause： Boolean 鼠标悬浮暂停轮播 默认为true zt-scroll-table
效果：
HTML
<zt-scroll-table style="width:500px;height:220px" :header="header" :datas="datas"></zt-scroll-table>js
header: ['列1', '列2', '列3'],
datas: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]参数介绍：
datas：展示的数据 数据类型： Array
header: Array 表头，默认为空，没有表头
align： String 文字居中方式，默认居中
index： Boolean 是否显示行号 默认不显示
columnWidth： Array 定制每列的宽度 [100,200,300]
rowNum: Number 展示数据的条数，默认5条
headerBGC：String 表格头部的背景色 默认 #00BAFF
oddRowBGC：String 奇数行背景色 默认 '#003B51'
evenRowBGC：String 偶数行背景色 默认 #0A2732
waitTime： Number 轮播时间间隔（ms） 默认 2000
headerHeight： Number 表格头部高度 默认35
indexText： String 行号表头 默认为 #
carousel： String 轮播方式 默认row 可选 page row:以行进行滚动 page：以页进行滚动
hoverPause： Boolean 鼠标悬浮暂停轮播 默认为true 
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
