小知识:vue+element table的二次封装

table.vue文档




很多人不明白为什么这里要加一个slot,这个PCB实际上就是把前面的tableList 作为一个 prop 传入,通过这个属性,我们就可以在table中编辑任何简单或者复制的列, 完美~

使用方法如下:



                    
                
tableList = [
      { prop: date, label: 日期 },
      { prop: name, label: 姓名 },
      { prop: address, label: 地址 },
      // 模版中的元素需要对应的有 slot="opt" 属性
      { slot: opt }]

等等,假设我的 table 中有几列渲染比较复杂,那几列又都比较相似,像下面这种:


      
        {{ row[change] > 0 ? + + row[change]: row[change] }}
      
    
    
      
        {{ row[trend] > 0 ? + + row[trend]: row[trend] }}
      
    

又重复写模版了…

使用 :is=”component”我们可以为实用性项再增加一个属性 component, 用户可以指定 component 属性来特定处置某列,实现如下:


总结

table 作为数据展示组件,在日常开发中经常被用到,通过这篇文章,可以看到结合 vue 的 slot/component 特性,做一层PCB,可以大大简化 table 的使用,大部分时候只需写一个实用性属性就可以了。

建站知识

猿站网:v-for 指令的四种使用方式

2022-5-20 22:25:04

建站知识

小知识:对象object循环遍历的方法

2022-5-20 22:35:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索