记一次对elementUI列表的封装

刚学了vue,看了下elementUI的组件,自己写着玩。

基本需求如下

  1. 单选全选框、分页
  2. 类似iview一样通过传入选项数组来定制表头,传入数据数组来控制表格内容

单选全选分页就不多说了,就是用element自己的组件
这是官网列表的写法

  
    
    
    
      
    
  

可以看到这个表格的选项是 el-table-column标签。然后数据和需求一样,直接传入数组,那我们直接循环渲染 el-table-column是不是就可以了

 
      

这是数据格式

 cloumn: [
        {
          prop: "id",
          label: "用户ID"
        },
        {
          prop: "createDateTime",
          label: "创建时间"
        },
        {
          prop: "userName",
          label: "用户昵称"
        }
      ],

等等,如果想自定义列模板该咋办

自定义列模板

官网是通过插槽来定义的

 
      
    

但是好像和我看vue官网的插槽写法不一样啊?哦已经被废弃了啊
记一次对elementUI列表的封装_第1张图片
于是我在组件中这样写

      
      
        
      

我在数据格式中添加scope: true这个属性,这样如果遇到有这个属性的列,就启用我的插槽,插槽的名字是数据中的,在外层调用的时候,比如这一列我定的prop是action,然后具名插槽名字也就是action,在外层 v-slot:action

 
      
    

运行一下,效果出来了,好像就是这么回事
等等,好像有什么事忘了!
我编辑按钮点了怎么把这一行的数据传进去啊??
记一次对elementUI列表的封装_第2张图片
还是看官网
通过这个插槽props