vue+elementUI-el-table实现动态显示隐藏列-组件化-trendstable

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)
},