Element分析（组件篇）——Table

说明

table.vue 是最终将各个组件拼接起来的地方，较为简单，因此不进行赘述，请确保看过一下几个分解的部分：

1. Element分析（工具篇）——Table
2. Element分析（工具篇）——TableStore
3. Element分析（工具篇）——TableLayout
4. Element分析（组件篇）——FilterPanel
5. Element分析（组件篇）——TableHeader
6. Element分析（组件篇）——TableColumn
7. Element分析（组件篇）——TableBody

源码解读

首先是 template 部分。

其次是 script 的部分：

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';

let tableIdSeed = 1;

export default {
  name: 'ElTable',

  mixins: [Locale],

  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },

    width: [String, Number],

    height: [String, Number],

    maxHeight: [String, Number],

    fit: {
      type: Boolean,
      default: true
    },

    stripe: Boolean,

    border: Boolean,

    rowKey: [String, Function],

    context: {},

    showHeader: {
      type: Boolean,
      default: true
    },

    rowClassName: [String, Function],

    rowStyle: [Object, Function],

    highlightCurrentRow: Boolean,

    currentRowKey: [String, Number],

    emptyText: String,

    expandRowKeys: Array,

    defaultExpandAll: Boolean,

    defaultSort: Object
  },

  components: {
    TableHeader,
    TableBody,
    ElCheckbox
  },

  methods: {
    // 切换选中的行
    toggleRowSelection(row, selected) {
      this.store.toggleRowSelection(row, selected);
      this.store.updateAllSelected();
    },

    // 清空选中行
    clearSelection() {
      this.store.clearSelection();
    },

    // 处理鼠标离开
    handleMouseLeave() {
      this.store.commit('setHoverRow', null);
      if (this.hoverState) this.hoverState = null;
    },

    // 更新是否有纵向滚动
    updateScrollY() {
      this.layout.updateScrollY();
    },

    // 绑定相关的时间监听
    bindEvents() {
      const { headerWrapper } = this.$refs;
      const refs = this.$refs;
      // 同步三个 body 的滚动
      this.bodyWrapper.addEventListener('scroll', function() {
        if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
        if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
        if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
      });

      // 表头的鼠标滚动变成横向滚动
      if (headerWrapper) {
        mousewheel(headerWrapper, throttle(16, event => {
          const deltaX = event.deltaX;

          if (deltaX > 0) {
            this.bodyWrapper.scrollLeft += 10;
          } else {
            this.bodyWrapper.scrollLeft -= 10;
          }
        }));
      }

      // 如果自适应的话，resize 的时候重新布局
      if (this.fit) {
        this.windowResizeListener = throttle(50, () => {
          if (this.$ready) this.doLayout();
        });
        addResizeListener(this.$el, this.windowResizeListener);
      }
    },

    // 布局
    doLayout() {
      this.store.updateColumns();
      this.layout.update();
      this.updateScrollY();
      this.$nextTick(() => {
        if (this.height) {
          this.layout.setHeight(this.height);
        } else if (this.maxHeight) {
          this.layout.setMaxHeight(this.maxHeight);
        } else if (this.shouldUpdateHeight) {
          this.layout.updateHeight();
        }
      });
    }
  },

  created() {
    this.tableId = 'el-table_' + tableIdSeed + '_';
    this.debouncedLayout = debounce(50, () => this.doLayout());
  },

  computed: {
    bodyWrapper() {
      return this.$refs.bodyWrapper;
    },

    shouldUpdateHeight() {
      return typeof this.height === 'number' ||
        this.fixedColumns.length > 0 ||
        this.rightFixedColumns.length > 0;
    },

    selection() {
      return this.store.selection;
    },

    columns() {
      return this.store.states.columns;
    },

    tableData() {
      return this.store.states.data;
    },

    fixedColumns() {
      return this.store.states.fixedColumns;
    },

    rightFixedColumns() {
      return this.store.states.rightFixedColumns;
    },

    bodyHeight() {
      let style = {};

      if (this.height) {
        style = {
          height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
        };
      } else if (this.maxHeight) {
        style = {
          'max-height': (this.showHeader ? this.maxHeight - this.layout.headerHeight : this.maxHeight) + 'px'
        };
      }

      return style;
    },

    bodyWidth() {
      const { bodyWidth, scrollY, gutterWidth } = this.layout;
      return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
    },

    fixedBodyHeight() {
      let style = {};

      if (this.height) {
        style = {
          height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
        };
      } else if (this.maxHeight) {
        let maxHeight = this.layout.scrollX ? this.maxHeight - this.layout.gutterWidth : this.maxHeight;

        if (this.showHeader) {
          maxHeight -= this.layout.headerHeight;
        }

        style = {
          'max-height': maxHeight + 'px'
        };
      }

      return style;
    },

    fixedHeight() {
      let style = {};

      if (this.maxHeight) {
        style = {
          bottom: (this.layout.scrollX && this.data.length) ? this.layout.gutterWidth + 'px' : ''
        };
      } else {
        style = {
          height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
        };
      }

      return style;
    }
  },

  watch: {
    // 高度改变时，重新设定高度
    height(value) {
      this.layout.setHeight(value);
    },

    // 当前行的 key 改变时，重新设置
    currentRowKey(newVal) {
      this.store.setCurrentRowKey(newVal);
    },

    // 更新数据
    data: {
      immediate: true,
      handler(val) {
        this.store.commit('setData', val);
      }
    },

    // 更改打开的行的 key
    expandRowKeys(newVal) {
      this.store.setExpandRowKeys(newVal);
    }
  },

  destroyed() {
    // 移除 resize 监听
    if (this.windowResizeListener) removeResizeListener(this.$el, this.windowResizeListener);
  },

  mounted() {
    this.bindEvents();
    this.doLayout();

    this.$ready = true;
  },

  data() {
    // 状态管理
    const store = new TableStore(this, {
      rowKey: this.rowKey,
      defaultExpandAll: this.defaultExpandAll
    });
    // 布局管理
    const layout = new TableLayout({
      store,
      table: this,
      fit: this.fit,
      showHeader: this.showHeader
    });
    return {
      store,
      layout,
      renderExpanded: null,
      resizeProxyVisible: false
    };
  }
};