Vue 版的proComponents__前端__Vue.js
发布于 18 天前 作者 banyungong 171 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
  • 经常用react的小伙伴应该都知道proComponents,强大的页面组件,特别是里面的table组件是非常好用的,极大的缩减了查询表格的代码量,只需要处理按钮的逻辑即可,n但是Vue这边一直没有类似的组件(大概)
  • 既然这样,就自己动手,首先是实现以后的样子

image.png

  • 因为是基于antd Vue 2.x版本封装的,所以只能vue3.x使用,对于组件内置props是以及插槽,是全部一个不留继承下来的,包括attrs
  • 接着说一下大概流程
graph TD
组件内部接受columns --> 对columns进行二次处理 --> 生成查询对象 --> 生成表单元素
  • 由于对掘金的编辑器不熟,还是用文字在解释一次
  • 首先组件内部对传过来的columns进行深度监听
    watch(() => props.columns, (newVal) => {
      // 对columns进行二次处理
    }, {
      deep: true,
      immediate: true
    })
  • 这里为什么要immediate以及deep呢,因为columns是复杂类型,并且大部分情况都是写死的,也就是页面加载就完成了,所以需要immediate,监听的原因是因为存在tabs + table的组合,有时候需要修改columns,所以需要进行监听
  • 这一步到底做了啥
  • 无非就是新增一些变量,方便我们控制表格,比如
  const markColumns = (cols: Comment.cols) => {
  const cloneColumns: Comment.cols= util.data.deepCopy(cols)
  cloneColumns.forEach(col => {
    col.type ??= 'text'
    // 生成的表单元素类型
    col.isShow ??= true
    // 是否隐藏该列,用户可手动控制
    col.search ??= false
    // 是否生成表单元素
  })
    }
  • 能够新增的远远不止这些,比如还有weight表单排序,或者入参的key等等,很多,甚至也可以自动枚举,显示不同颜色,只要能够方便我们开发中的全部加上,只有开发者才是最懂开发者的

  • 当然在之前需要生成表单数据对象,方便v-model绑定数据

    const createData = (cols: Comment.cols) => {
      const data = {}
      cols.forEach(col => {
        data[col.dataIndex] = 'xxx'
        // 这里需要根据表单元素的类型生成空串还是数组或者其他类型来v-model
      })
    }
  • 最后,在生成真正渲染表单元素的columns,这里只需要用上面处理完成的columns来进行slice即可,因为需要动态显示和隐藏
    const showColumns = computed(() => cloneColumns.slice(0, 3))
    const hideColumns = computed(() => cloneColumns.slice(3))
  • 只需要渲染showColumns即可,而hideColumns根据变量动态显示隐藏即可
  • 最后还有表单元素的有些接口处理,比如select的options,这些都可以通过传递函数或者数据包过来执行,可能复杂一点的就是联动等等
  • 看到这里剩下的功能应该都有思路了,也能够自己随便进行扩展
  • 代码就不上了,因为目前没有单独提出来,如果有大家有兴趣的话可以后面在开一个帖子分析一下详细的思路和完整的代码

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 萝莉 原文链接:https://juejin.im/post/7012544603211431967

回到顶部