2019-5-27 Vue slot-scope 意义以及理解 模仿Element ui table实现简单的table组件

最近看了element-ui table封装的源码,发现使用了slot-scope,Vue 2.6新特性;

然后找了资料,觉得写的还不错,就备注下:其他的写的不太好,包括官方写的太乱了;

https://segmentfault.com/a/1190000015884505

 

  <div class="hello">
      <my-table :data="userData" style="{}">
        <my-table-col label="姓名" prop="name" width="80">  
          <template    v-slot:default="scope" >
            <span class="blue">{{scope.name}} </span>
          </template>
        <my-table-col label="年龄" prop="age" width="100"> 
        </my-table-col>
        <my-table-col ref="col" label="地址" prop="address" width="200">
          <template    v-slot:default="scope" >
            <span class="blue">{{scope.address}} </span>
          </template>
        </my-table-col>
      </my-table>
  </div>

这是自己模仿element-ui封装的table组件;

可以看到,这里我my-table组件作为父组件,我需要做两件事情

1.设置子组件渲染样式

2.取出某一个数组的渲染数据(因为我传入的userData是一个数组,而我子组件每一行,需要取得是数组中的某一个数据)

3.根据样式+数据渲染某一列;

自己实现的table组件代码

链接: https://pan.baidu.com/s/14I0FEQv96c8VqkPccsIU7Q 提取码: szw9 复制这段内容后打开百度网盘手机App，操作更方便哦