从零实现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 实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
图片转BASE64编码
在线图片转Base64编码工具