Element实现动态表格的示例代码

目录

• 【代码背景】
• 【代码实现】
• #1# -> 代码复用的基础是你需要一个可复用的组件
• #2# -> 在展示页面使用动态表格组件
• #3# -> 如何给动态表格根据需求动态添加序号列/索引列

【代码背景】

有这样一个业务需求场景，有大概十几张表归属于某个类别，用户希望在同一个页面，通过选择不同的查询指标展示不同的表格，这些表的表头样式类似但是又不完全相同，怎么做呢？

到目前为止所有基于Element UI的表格样式都是直接在页面写死的，像官方这样：

要解决上述问题，最简单暴力的方式是为每个表写一个单独组件，然后通过select框触发事件切换不同组件路由渲染页面，当然这种方式很笨，也不符合代码复用的基本原则，所以为了偷懒，为了坚守代码复用的基本原则，开始思考有没有更好的方式来解决这个问题。

仔细观察这个，表格数据是通过:data绑定的，表格头部数据则是通过标签展示的，表头数据是不是也可以通过某种传参的方式结合v-for来渲染的具体数据呢？在度娘的帮助下，果然有大佬已经这样做了，实现了动态表格，参考链接挂在最底下了哦，在此特别感谢免费分享知识的大佬们，知识无价，学无止境。

现将本项目的具体实现代码记录如下，完善了一些代码的注解，尝试帮助理解。

【代码实现】

#1# -> 代码复用的基础是你需要一个可复用的组件

在/components/Table文件夹下新建两个组件

DynamicTable.vue

TableColumn.vue

几点重要说明：

（1）表格头部的传参主要分为两类：带children节点和不带children节点的，如下图所示

请注意children节点是为了完成复杂表头的渲染，例如上面这个示例最终的表头渲染样式如下：

那么问题来了，是的标签，那这个是个啥?

（2）DynamicTable.vue调用TableColumn.vue组件

DynamicTable.vue通过:column-header给TableColumn.vue传递带children子节点的表头信息，TableColumn.vue接收到这个节点信息后，主要做了以下两件事情：

第一：通过渲染了一个label标签

第二：继续判断该节点是否存在children子节点

=> 如果存在children节点，继续通过进行渲染，继续把这个子节点传给TableColumn.vue组件，重复上述步骤

=> 如果不存在children节点，表示这是一个终止节点，通过渲染结束

#2# -> 在展示页面使用动态表格组件

使用动态表格组件相对来说比较简单，唯一需要注意的地方是，渲染表格头部跟数据时必须需要添加以下代码，不然页面无法按照预期完成渲染。

this.$nextTick(() => {
    // DOM现在更新了
    this.dynamicTableShow = true
})

关于this.$nextTick()可以参考官网：https://cn.vuejs.org/v2/guide/reactivity.html

#3# -> 如何给动态表格根据需求动态添加序号列/索引列

在Element UI官方例子中，如果需要给table添加一个序号列或者索引列非常简单，直接在里声明一个特殊的即可。

那如何在动态表格组件里添加序号列呢？更甚者如果根据需要自行添加或者不添加？

首先我们来改造 DynamicTable.vue

像官方例子一样，我们先在里也声明一个

注意到这里有一个v-if绑定了一个isIndex值，这个值就是我们需要在父组件进行传值的关键了

在props里声明isIndex为Boolean类型

 props: {
      // 表格的数据
      tableData: {
        type: Array,
        required: true
      },
      // 多级表头的数据
      tableHeader: {
        type: Array,
        required: true
      },
      // 表格的高度
      height: {
        type: String,
        default: '300'
      },
      // 是否需要添加序号列
      isIndex: {
        type: Boolean
      }
}

在展示页面使用组件时通过:is-index传入指定参数

在同页面表头需要切换的情况下，上面这种写法容易在页面初始化时候单独显示一个序号列，就像下面这样，非常不美观

我希望序号列可以和其他普通列一样在表头渲染的时候同时加载，可以这样做

将原本的常量“true”修改成一个变量isAddIndex替代，然后在表头渲染完成的时候将其值修改成true

 this.isAddIndex = true

这样序号列就能跟其他普通列同时进行渲染了。

【参考资料】

https://www.jianshu.com/p/9c4ba833658f

https://www.cnblogs.com/llcdxh/p/9473458.html

到此这篇关于Element实现动态表格的示例代码的文章就介绍到这了,更多相关Element 动态表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！