[element] 简单封装一个表格展示

简单封装

如果你想呈现一个表格,直接复制案例的话是这样的,圈出来的你需要写进入,麻烦

这时候把需要显示的列数据弄成一个对象数组, 给它列名和标题就行

 记得这个prop和源数据的prop要对应!!

const columns = [
  {
    label: "日期",
    prop: 'date'
  },
  {
    label: "姓名",
    prop: 'name'
  },
  {
    label: "地址",
    prop: 'address'
  },
]
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

效果如下

 

透传 attributes

问题来了,原始的组件是可以传参数的 ,例如传一个斑马纹

但是我封装后不支持了啊!你总不能在这里预留一堆属性吧?

这时候有个属性叫$attrs

透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。

组件实例 | Vue.js

 加入代码是这样的话

我打印$attrs的话

就会变成这样

 

 自定义作用域

如果你想自定义成这样的话

哪列需要传入插槽就预留位置,先用element自带的template获取scope先, 再写具名插槽

外部调用可以哦通过作用域插槽获取子组件传来的scope,然后自定义插槽内容