el-table 表格列实现动态显示与隐藏

el-table 表格列实现动态隐藏显示

通常一个表格横向展示的时候,字段过多,但是我们又想要只显示部份字段,这时可以使用本组件实现你想要的效果。

1、实现原理:通过给列添加v-if来实现动态显示与隐藏效果

一、编写列显示与隐藏控制组件







el-table 表格列实现动态显示与隐藏_第1张图片

33.png

二、调用组件







方法有点笨,但是能实现,而且表格不会错位。
主要是在确定选择列后加一个

this.$nextTick(res=>{
  this.$refs['multipleTable'].doLayout()
})

网上说给列加随机数 key ,试过还是会错位。

 

你可能感兴趣的:(elementui,vue.js,javascript)