Vue -el-table表格动态控制表头动态展示数据(控制每一列展示)

前言

  • 最近在实际开发中我们遇到一个需求是用户自己控制键值来生成对应表格数据。

  • 换个思路就是我们还是正常查询数据,需要一个开关页面来动态改变表格展示每一列。

  • 我们需要一个开关页面,里面有多选,确定重置取消,确定时把选中数据传递给父组件,动态数据for循环

  • 最好是以封装成组件的形式,可以使代码减少,别的地方也可以用。组件全局注册直接用(主页文章有)

细节

1.可以直接让后端以分页形式把所有需要的字段都返来,最好可以加一个序号。

2.在打开子组件的时候,把默认选中的字段表头重新赋值一次,因为直接在data里面写死的话,子组件侦听器侦听不到,

3.在父组件页面打开的时候可以在month展示一次默认选中数据表格,用户体验较好。

代码如下-可直接复制

父组件

子组件


总结:

经过这一趟流程下来相信你也对 Vue -el-table表格动态控制表头动态展示数据(控制每一列展示) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

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