【ElementUI源码】ElementUI中的Table组件

本文基于element-ui@2.7.2，仅对Table组件的结构做一个简单的分析，具体实现功能请见源码

列表结构

    <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__footer-wrapper"></div>
        <!-- 左侧固定列 -->
        <div class="el-table__fixed">
            <!-- header -->
            <div class="el-table__fixed-header-wrapper"></div>
            <!-- body -->
            <div class="el-table__fixed-body-wrapper"></div>
            <!-- footer -->
            <div class="el-table__fixed-footer-wrapper"></div>
        </div>
        <!-- 右侧固定列 -->
        <div class="el-table__fixed-right">
            <!-- header -->
            <div class="el-table__fixed-header-wrapper"></div>
            <!-- body -->
            <div class="el-table__fixed-body-wrapper"></div>
            <!-- footer -->
            <div class="el-table__fixed-footer-wrapper"></div>
        </div>
        <!-- 右侧固定列补丁：预留滚动条的宽度 -->
        <div class="el-table__fixed-right-patch"></div>
        <!-- 列宽调整代理 -->
        <div class="el-table__column-resize-proxy"></div>
    </div>

隐藏列

？？？

表头部分

import引入同目录下的header组件

    import TableHeader from "./table-header";

    <div class="el-table__header-wrapper">
        <table-header></table-header>
    </div>

表格主体

    import TableBody from "./table-body";

    <div class="el-table__body-wrapper">
        <table-body></table-body>
        <!-- 当表格没有数据时占位 -->
        <div class="el-table__empty-block"></div>
    </div>

表尾部分

    import TableFooter from "./table-footer";

    <div class="el-table__footer-wrapper">
        <table-footer></table-footer>
    </div>

左侧固定列

    <div class="el-table__fixed">
        <div class="el-table__fixed-header-wrapper">
            <table-header></table-header>
        </div>
        <div class="el-table__fixed-body-wrapper">
            <table-body></table-body>
        </div>
        <div class="el-table__fixed-footer-wrapper">
            <table-footer></table-footer>
        </div>
    </div>

右侧固定列

右侧固定列的组件加载方式同左侧固定列

右侧固定列补丁

预留滚动条的宽度

    <div class="el-table__fixed-right-patch"></div>

列宽调整代理

    <div class="el-table__column-resize-proxy"></div>

列表功能

import 引入

    // 列表的多选按钮
    import ElCheckbox from 'element-ui/packages/checkbox';
    // 限制操作频度的组件
    import debounce from 'throttle-debounce/debounce';
    // 添加或移除调整尺寸事件
    import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
    // 鼠标滚动事件
    import Mousewheel from 'element-ui/src/directives/mousewheel';
    // 多语言
    import Locale from 'element-ui/src/mixins/locale';
    // 标记一些已经过期的属性props和事件event，当在开发环境中调用时，会通过console.warn在控制台输出提示
    import Migrating from 'element-ui/src/mixins/migrating';
    // 列表状态管理组件
    import TableStore from './table-store';
    // 列表布局管理组件
    import TableLayout from './table-layout';
    // 表格主体组件
    import TableBody from './table-body';
    // 表格头部组件
    import TableHeader from './table-header';
    // 表格尾部组件
    import TableFooter from './table-footer';
    // 获取行的标识
    import { getRowIdentity } from './util';

data

    layout, // 布局管理模块
    store, // 状态管理模块
    isHidden: false, // 是否隐藏
    renderExpanded: null,
    resizeProxyVisible: false, // 代理是否可见
    resizeState: { // 调整大小的状态数据：宽和高
        width: null,
        height: null
    },
    // 是否拥有多级表头
    isGroup: false,
    scrollPosition: 'left' // 滚动默认位置

computed

    // 返回表格尺寸尺寸
    tableSize() {},
    // 返回表格主体
    bodyWrapper() {},
    // 能否更新高度
    shouldUpdateHeight() {},
    // 返回行选择集
    selection() {},
    // 返回列的集合
    columns() {},
    // 返回表格数据
    tableData() {},
    // 返回左侧固定列的集合
    fixedColumns() {},
    // 返回右侧固定列的集合
    rightFixedColumns() {},
    // 计算表格宽度
    bodyWidth() {},
    // 计算表格高度
    bodyHeight() {},
    // 计算固定列表body高度
    fixedBodyHeight() {},
    // 计算固定列高度
    fixedHeight() {}

watch

    // 更新高度
    height: {},
    // 更新最大高度
    maxHeight: {},
    // 更新 RowKey
    currentRowKey: {},
    // 更新数据
    data: {},
    // 更新展开行 RowKey
    expandRowKeys: {}

method

    // 重写警告
    getMigratingConfig() {},
    // 设定某行为选中行
    setCurrentRow(row) {},
    // 切换行的选中状态
    toggleRowSelection(row, selected) {},
    // 用于可展开表格与树形表格，切换某一行的展开状态
    toggleRowExpansion(row, expanded) {},
    // 清空选中的表格集
    clearSelection() {},
    // 清空过滤条件至未过滤的状态
    clearFilter(columnKeys) {},
    // 清空排序条件至未排序的状态
    clearSort() {},
    // 鼠标移开某行的事件（清除hover的状态）
    handleMouseLeave() {},
    // 更新垂直滚动条位置和列的宽度
    updateScrollY() {},
    // 处理左/右固定列鼠标滚动事件
    handleFixedMousewheel(event, data) {},
    // 处理头/尾鼠标滚动事件
    handleHeaderFooterMousewheel(event, data) {},
    // 绑定事件：处理鼠标滚动和调整大小事件
    bindEvents() {},
    // 调整大小事件方法
    resizeListener() {},
    // 刷新表格布局
    doLayout() {},
    // 处理列表重新排序
    sort(prop, order) {},
    // 切换所有行的选中状态
    toggleAllSelection() {},
    // 获取 RowKey
    getRowKey(row) {},
    // 返回treeData数据
    getTableTreeData(data) {}