Element UI 源码解读之 Table 组件

非常感谢 ElemeFE 团队开发的 Element 组件库,这套组件库不但界面美观而且代码优雅,十分值得借鉴。Table 是较为常用的组件之一,本文仅对 Table 结构做一个简单的分析,具体实现可参考 Element 源码 ( V1.25 )。

表格结构

<div class="el-table">
    <!--隐藏列-->
    <div class="hidden-columns"></div>
    <!--表头部分-->
    <div class="el-table__header-wrapper"></div>
    <!--表格主体-->
    <div class="el-table__body-wrapper"></div>
    <!--左侧固定列-->
    <div class="el-table__fixed"></div>
    <!--右侧固定列-->
    <div class="el-table__fixed-right"></div>
    <!--右侧固定列补丁-->
    <div class="el-table__fixed-right-patch"></div>
    <!--列宽调整代理-->
    <div class="el-table__column-resize-proxy"></div>
</div>复制代码

结构完整的表格

隐藏列

  • 容纳 table 内容

表头部分

// TableHeader作为独立的子组件引入
import TableHeader from './table-header'复制代码
<div class="el-table__header-wrapper">
    <table-header></table-header>
</div>复制代码

表格主体

// TableBody作为独立的子组件引入
import TableBody from './table-body'复制代码
<div class="el-table__body-wrapper">
    <table-body></table-body>
    <!--表格数据为空时,显示占位符-->
    <div class="el-table__empty-block"></div>
</div>复制代码

左侧固定列

<div class="el-table__fixed">
    <div class="el-table__fixed-header-wrapper"></div>
    <div class="el-table__fixed-body-wrapper"></div>
</div>复制代码

右侧固定列

右侧固定列的结构与左侧相同

<div class="el-table__fixed-right">
    <div class="el-table__fixed-header-wrapper"></div>
    <div class="el-table__fixed-body-wrapper"></div>
</div>复制代码

右侧固定列补丁

  • 预留滚动条的宽度

列宽调整代理

  • 显示调整表格尺寸的按钮

表格功能

import 项

// 用于选择列的多选按钮
import ElCheckbox from 'element-ui/packages/checkbox'
// 控制操作频度的组件
import throttle from 'throttle-debounce/throttle'
import debounce from 'throttle-debounce/debounce'
// 添加或移除调整尺寸事件
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
// 多语言支持
import Locale from 'element-ui/src/mixins/locale'
// 表格状态管理组件
import TableStore from './table-store'
// 表格布局管理组件
import TableLayout from './table-layout'
// 表格主体组件
import TableBody from './table-body'
// 表头部分组件
import TableHeader from './table-header'
// 处理鼠标滚动事件
import { mousewheel } from './util'复制代码

属性 props

官方文档描述的很详尽,组件的属性与文档基本一致,还有3个未公开的属性:widthmaxHeightcontext,理论上也是可以使用的。

表格组件的属性基本上用到了所有的属性定义形式,比如:

  1. 属性的常规定义方法:propName: propType
stripe: Boolean复制代码
  1. 允许多种类型:propName: [propType1, propType2...]
height: [String, Number]复制代码
  1. 定义默认值为基本数据类型:
fit: {
    type: Boolean,
    default: true
}复制代码
  1. 定义默认值为对象,对象为传址引用,返回一个实例:
data: {
    type: Array,
    default: function() {
        return [];
    }
}复制代码

数据 data

主要包含状态管理模块:store,布局管理模块:layout

计算属性 computed

// 返回表格主体部分
bodyWrapper()
// 能否自动更新表格高度,height 属性为数值或具有固定列时可以
shouldUpdateHeight()
// 获取行选择集
selection()
// 获取列对象集合
columns()
// 获取表格数据
tableData()
// 获取左侧固定列集合
fixedColumns()
// 获取右侧固定列集合
rightFixedColumns()
// 计算表格高度
bodyHeight()
// 计算表格宽度
bodyWidth()
// 计算固定列表身高度
fixedBodyHeight()
// 计算固定列整体高度
fixedHeight()复制代码

方法 methods

// 切换行的选择状态
toggleRowSelection(row, selected)
// 清除行的选择集
clearSelection()
// 处理鼠标离开某行的事件
handleMouseLeave()
// 更新垂直滚动条位置
updateScrollY()
// 绑定事件:处理鼠标滚动及调整大小事件
bindEvents()
// 刷新表格布局
doLayout()复制代码

观察 watcher

// 更新高度
height
// 更新 RowKey
currentRowKey
// 更新数据
data
// 更新展开行 RowKey
expandRowKeys复制代码

生命周期 lifecycle

分别设置了 createdmounteddestroyed,详见示意图。

参考资料:

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于element ui table的窜梭框(transfer)功能,根据提供的引用内容,没有具体的相关信息。引用提到了element ui table的筛选功能,引用提到了动态改变单元格的颜色,引用提到了一些关于引入脚本的注意事项。但是没有提到element ui table的窜梭框功能。请提供更多的信息或引用内容,以便我可以更好地回答您的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [详解使用element-ui table组件的筛选功能的一个小坑](https://download.csdn.net/download/weixin_38657465/12950259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [element ui el-table 动态改变 单元格 的颜色.txt](https://download.csdn.net/download/web_hj/11970522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [element ui table组件使用源码](https://download.csdn.net/download/museions/10268375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值