自定义table组件

2017-11-22  本文已影响0人  我_巨可爱

使用table组件

table中会有什么内容,内容具体组成又是什么样的,千变万化。因此使用slot

<myTable>
  <!--可以根据数据直接将内容平铺到这里-->
  <span v-for></span>
  <span v-for></span>
</myTable>

定义table组件

  1. 需要头部columns数组,需要data关于主体的一些数据
  2. 根据数据生成头部thead
  3. 根据数据生成体部tbody,第一层循环在tr上,循环数据是data,第二层循环在td上,循环数据是columns
  4. 在每个td中声明所有可以的可能的类型,通过生成slot属性关联外部对应元素

v-ifv-elsev-for

  1. v-for的优先级大于v-if,当两个指令同在一个标签上。v-else所在标签也可以获得v-for的循环数据
  2. v-forv-else在同一个标签上,v-if无法获取v-for的循环数据
上一篇下一篇

猜你喜欢

热点阅读