从零实现Vue的组件库(十二)- Table 实现

栏目: JavaScript · 发布时间: 5年前

内容简介:代码实例地址:Table 实例代码地址:
从零实现Vue的组件库(十二)- Table 实现

代码

<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="姓名">{{ item.name }}</fat-table-column>
        <fat-table-column label="日期">{{ item.date }}</fat-table-column>
        <fat-table-column label="地址">{{ item.address }}</fat-table-column>
    </template>
</fat-table>
<!-- 自定义列模板 -->
<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="头像">
            <fat-hover-tip type="right-center">
                <template slot="hover-part">{{ item.name }}</template>
                <template slot="tip-part">
                    <img src="/static/img/gakki.jpg" alt="示意图">
                </template>
            </fat-hover-tip>
        </fat-table-column>

        <fat-table-column label="地址">{{ item.address }}</fat-table-column>
        
        <fat-table-column label="操作">
            <fat-button class="btn" type="primary" size="mini" @click="$message({ content: '编辑' })">编辑</fat-button>
            <fat-button class="btn" type="primary" size="mini" @click="$message({ content: '删除' })">删除</fat-button>
        </fat-table-column>
    </template>
</fat-table>
复制代码

实例地址:Table 实例

代码地址: Github UI-Library

2. 原理

Table组件的基本结构如下

从零实现Vue的组件库(十二)- Table 实现

主要可分为两个部分:

<thead>
<tbody>

首先实现Table-body,再依据其对应 label 来生成Table-head。

Table-body 表格内容:

<template>
  <table :class="['table-wrapper', { 'is-stripe': stripe }]">
    <thead>
      ...
    </thead>
    <!-- Table-body -->
    <tbody class="table-body-wrapper">
      <tr v-for="(item, index) in data" :key="index" :data-index="index" class="tr-wrapper">
        <slot v-bind:item="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: { type: Array, default: () => [] },
    align: { type: String, default: "left" },
    stripe: { type: Boolean, default: false }
  },
  provide() {
    return {
      fatTable: this
    };
  },
  ...
};
</script>
复制代码

组件的 prop 中包含所需数据 data ,利用 v-for="(item, index) in data" 指令生成每一行 tr ,再通过 slot-scope 来生成每一项的内容,此时的数据流变为

从零实现Vue的组件库(十二)- Table 实现

具体使用时,只需要利用 slot-scope 来传递这个数据即可

<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="姓名">{{ item.name }}</fat-table-column>
    </template>
</fat-table>
复制代码

这样使得每一个 table-column 都可以被自定义,然后可以拓展成为模板。

Table-head 表格头:

由于每个 fat-table-column 都有 label 属性,利用这个 prop 来生成 Table-head ,在 Table 组件中 provide 当前组件用于子组件的访问

provide() {
    return {
        fatTable: this
    };
}
复制代码

同时 fat-table-column 组件的实现

<template>
  <td class="td-wrapper c-size-m">
    <slot>无</slot>
  </td>
</template>
<script>
export default {
  props: {
    label: { type: String, required: true }
  },
  inject: ["fatTable"],
  created() {
    this.$nextTick(() => {
      let dom = this.$el.parentNode;
      let index = null;

      while (dom.tagName !== "TR") {
        dom = dom.parentNode;
      }

      index = dom.getAttribute("data-index");
      if (index === "0") {
        this.fatTable.addLabel(this.label);

        this.$destroy = () => {
          this.fatTable.delLabel(this.label);
        };
      }
    });
  }
};
</script>
复制代码

当组件 create 时,判断是否为第一行,如果是,则调用 this.fatTable.addLabel(this.label) ,通知父组件需要添加当前 labelTable 组件的 head 中,同时定义当组件 destroy 时, 删除对应 label

this.$destroy = () => {
    this.fatTable.delLabel(this.label);
};
复制代码

Table 组件中,定义 addLable 以及 delLabel 的处理方法

addLabel(label) {
    const { labels } = this;
    const existItem = labels.find(item => item.label === label);
    // 利用 colspan 来处理合并表头的情况
    if (existItem) {
        existItem.colspan += 1;
    } else {
        labels.push({
          label,
          colspan: 1
        });
    }
},
delLabel(label) {
    this.labels = this.labels.filter(item => item.label !== label);
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

你必须知道的213个C语言问题

你必须知道的213个C语言问题

范立锋、李世欣 / 人民邮电出版社 / 2010-6 / 45.00元

《你必须知道的213个C语言问题》精选了213个在C语言程序设计中经常遇到的问题,目的是帮助读者解决在C语言学习和开发中遇到的实际困难,提高读者学习和开发的效率。这些问题涵盖了C语言与软件开发、C语言基础、编译预处理、字符串、函数、键盘操作、文件、目录和磁盘、数组、指针和结构、DOS服务和BIOS服务、日期和时间、重定向I/O和进程命令、C语言开发常见错误及程序调试等内容,均是作者经过充分的调研,......一起来看看 《你必须知道的213个C语言问题》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具