Vue封装通用table组件的完整步骤记录

目录

• 前言
  
• 为什么需要封装table组件？
  
• 第一步：定义通用组件
  
• 第二步：父组件与子组件进行render通信
  
• 第三步：使用组件
  
• 总结
  

前言

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

为什么需要封装table组件？

后台管理系统表格使用频率高，减少关于table的业务代码，且便于后期统一修改、便于后期维护。如给table内容展示，超出单元格以省略号展示等。

对于大部分的后台管理系统，数据表格的展示大同小异，由于不想写重复的代码，所以我选择封装通用table组件，解放双手。如果你的表格有一列并不是简单dom元素，比如switch按钮，完全可以传入一个render函数，来达到目的。

第一步：定义通用组件

第二步：父组件与子组件进行render通信

为了实现父组件render函数在子组件中生效，我们需要定义一个render函数，在子组件中引用。

// table.js
export default {
  props: {
    render: {
      type: Function
    },
    param: {
      type: Object
    }
  },
  render(h) {
    return this.render(h, this.param)
  }
}

第三步：使用组件

总结

在引用组件的页面中，我们可以给每一个table列加方法，也可以给编辑、删除、详情添加自定义的方法，完全实现定制化。也可以自定义render函数。效果图如下：

到此这篇关于Vue封装通用table组件的文章就介绍到这了,更多相关Vue封装通用table组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！