从零实现Vue的组件库(十二)- Table 实现
栏目: JavaScript · 发布时间: 5年前
内容简介:代码实例地址: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组件的基本结构如下
主要可分为两个部分:
<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
来生成每一项的内容,此时的数据流变为
具体使用时,只需要利用 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)
,通知父组件需要添加当前 label
到 Table 组件的 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); } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 从零实现Vue的组件库(二)-Slider组件实现
- Vue自定义组件(简单实现一个自定义组件)
- 实现一个沙漏⏳组件
- angular 实现下拉列表组件
- 从零实现Vue的组件库(五)- Breadcrumb 实现
- 从零实现Vue的组件库(十)- Select 实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
你必须知道的213个C语言问题
范立锋、李世欣 / 人民邮电出版社 / 2010-6 / 45.00元
《你必须知道的213个C语言问题》精选了213个在C语言程序设计中经常遇到的问题,目的是帮助读者解决在C语言学习和开发中遇到的实际困难,提高读者学习和开发的效率。这些问题涵盖了C语言与软件开发、C语言基础、编译预处理、字符串、函数、键盘操作、文件、目录和磁盘、数组、指针和结构、DOS服务和BIOS服务、日期和时间、重定向I/O和进程命令、C语言开发常见错误及程序调试等内容,均是作者经过充分的调研,......一起来看看 《你必须知道的213个C语言问题》 这本书的介绍吧!