## 基本使用
### 组件 component-table
```
~~~
# 基本使用
<component-table v-if="tableData.tableData.length>0" :data="tableData"></component-table>
~~~
```
### 数据结构
```
tableData: {
loading:false,
border:true,// 是否边框
size:'small',// table表格模式
stripe:true,// 是否为斑马纹 table
maxHeight:300,// table最大高度
showHeader:true,// 是否固定显示表头
// 请求回来的数据
tableData:[
{id:1, date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333, status:0,img:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:2, date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1517 弄', zip: 200333, status:1,img:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:3, date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1519 弄', zip: 200333, status:0,img:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:4, date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1516 弄', zip: 200333, status:0,img:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:5, date: '2016-05-01', name: '王小5', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1519 弄', zip: 200333, status:0,img:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'}
],
// 列
tableLabel:[
{type:'selection',align:'center'},
{type:'index',fixed:'left'},
{prop:'id',title:'ID',type:'index',fixed:true,width:80,align:'center',style:(params,item)=>{return {color:'red'}}},
{prop:'img',title:'缩略图',isPreview:true,width:100,style:(params,col) => {
return {height:'50px'}
}},
{prop:'name',title:'名称',width:100,render:(params,col) => {
return [params.row.name,{color:'blue'}];
}},
{prop:'date',title:'日期',minWidth:150,slot:'abc',/** 扩展列：slot:'col' **/},
{prop:'province',title:'省份',slot:'col',minWidth:150,},
{prop:'city',title:'城市'},
{prop:'address',title:'地址',tooltip:true,width:150},
{prop:'zip',title:'邮编',sort:'custom'},
{prop:'status',title:'状态',isSwitch:true,style:(params,item)=>{return {display:'none'}},activeText:'正常',inactiveText:'禁用',activeValue:1,inactiveValue:2,change:(currentData) => {console.log('switch开关',currentData)}}
],
// 操作
tableOption:{
label:'操作',
width:230,
slot:true,// 按钮操作扩展，不扩展时去掉或改为false
buttons:[
{title:'查看',plain:true,click:(params,currentBtn) => {
console.log(params);
console.log(currentBtn);
console.log('当前表格对象',params._self);
},render:(params,item)=>{
console.log(params);
return 123;
}
},
{title:'编辑',type:'primary',plain:true,icon:'el-icon-edit',click:(params,currentBtn) => {
console.log(params);
console.log(currentBtn);
console.log('当前表格对象',params._self);
}},
{title:'删除',type:'danger',plain:true,icon:'el-icon-delete',trigger:'click',header:'确定要删除吗？',tooltip:true,click:{
ok:(params,currentBtn) => {
console.log('确认删除',params);
console.log(currentBtn);
console.log('当前表格对象',params._self);
},
cancel:(params,currentBtn) => {
console.log('取消删除',params);
console.log(currentBtn);
console.log('当前表格对象',params._self);
}
}},
]
},
// 分页
page:{
align:'right',
small:false,// 默认false
background:true,// 默认true
pageSizes:[10,20],
layout:'total, sizes, prev, pager, next, jumper',// 默认 prev, pager, next
total:1,
size:10,
currentPage:1,
currentChange:(currentPage) => {
console.log('当前页',currentPage);
this.tableData.loading = true;
setTimeout(() => {
this.tableData.loading = false;
},1500)
},
sizeChange:(val) =>{// 不需要可去掉
console.log('每页 '+val+ '条');
}
},
// 排序
sortChange(obj,tableObject) {
console.log(10);
console.log(obj);
console.log('当前表格对象',tableObject);
},
// 表格实现多选时的 change 事件
selectionChange(params,tableObject){
console.log('选择项改变时的值',params);
console.log('表格对象',tableObject);
},
headerClick(dom,row,index,e){// 单击某一列表头事件,不需要可去掉
console.log('单击表头');
},
headerContextmenu(dom,row, column, event){// 鼠标右键点击某一列表头触发事件,不需要可去掉
console.log('鼠标右键表头');
},
rowClick(dom,row,index,e){// 单击行事件,不需要可去掉
// dom.toggleRowExpansion(row);// 点击整行展开树形节点
console.log('单击');
},
rowDblclick(dom,row,index,e){// 双击行事件,不需要可去掉
console.log('双击');
},
expandChange(dom,row,expanded){// 树形展开事件,不需要可去掉
console.log('222',expanded);
},
rowContextmenu(dom,row, column, event){// 鼠标右键点击触发事件,不需要可去掉
console.log(666);
},
}
```
使用就是这么简单
