trendstable 组件使用
1.下载
cnpm install --save trendstable
2.在main.js中引入
import trendstable from 'trendstable';
import 'trendstable/lib/trendstable.css';
Vue.use(trendstable);
3.在页面中直接使用
<trends-table :tableList="activeTableList"
:hideColumnIndexs='[]' ref="trendtable"
:pageSize.sync="activationForm.pageSize"
:pageNumber.sync="activationForm.pageNumber"
:total="activeTotal"
@getHideColist="getHideColist"
@pagination = "paginationHadle"
@selection-change="handleSelectionChange"
>
<el-table-column label="序号" width="50" type="index" v-if="!columnHideList[0]">
<template slot-scope="scope">
{{ (activationForm.pageNumber - 1) * activationForm.pageSize + (scope.$index + 1)}}
</template>
</el-table-column>
<el-table-column prop="codeNo" label="序列号" v-if="!columnHideList[1]"> </el-table-column>
</trends-table>
4.相关方法参数
// 获得列显示隐藏数据
getHideColist(item){
//将返回的初始隐藏行数据保存,并调用
this.columnHideList = item;
},
//分页返回
paginationHadle(item){
this.onrenewalForm.pageNumber = item.pageNumber;
this.onrenewalForm.pageSize = item.pageSize;
this.getonrenewalList();
},
//多选返回选中的行数据
handleSelectionChange(item){
// console.log('=多选===',item)
},