element-sim 1.0.0 → 1.0.2

package/packages/table/src/store/watcher.js

@@ -1,381 +1,381 @@
-import Vue from 'vue';
-import merge from 'element-ui/src/utils/merge';
-import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';
-import expand from './expand';
-import current from './current';
-import tree from './tree';
-
-const sortData = (data, states) => {
-  const sortingColumn = states.sortingColumn;
-  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
-    return data;
-  }
-  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
-};
-
-const doFlattenColumns = (columns) => {
-  const result = [];
-  columns.forEach((column) => {
-    if (column.children) {
-      result.push.apply(result, doFlattenColumns(column.children));
-    } else {
-      result.push(column);
-    }
-  });
-  return result;
-};
-
-export default Vue.extend({
-  data() {
-    return {
-      states: {
-        // 3.0 版本后要求必须设置该属性
-        rowKey: null,
-
-        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
-        data: [],
-
-        // 是否包含固定列
-        isComplex: false,
-
-        // 列
-        _columns: [], // 不可响应的
-        originColumns: [],
-        columns: [],
-        fixedColumns: [],
-        rightFixedColumns: [],
-        leafColumns: [],
-        fixedLeafColumns: [],
-        rightFixedLeafColumns: [],
-        leafColumnsLength: 0,
-        fixedLeafColumnsLength: 0,
-        rightFixedLeafColumnsLength: 0,
-
-        // 选择
-        isAllSelected: false,
-        selection: [],
-        reserveSelection: false,
-        selectOnIndeterminate: false,
-        selectable: null,
-
-        // 过滤
-        filters: {}, // 不可响应的
-        filteredData: null,
-
-        // 排序
-        sortingColumn: null,
-        sortProp: null,
-        sortOrder: null,
-
-        hoverRow: null
-      }
-    };
-  },
-
-  mixins: [expand, current, tree],
-
-  methods: {
-    // 检查 rowKey 是否存在
-    assertRowKey() {
-      const rowKey = this.states.rowKey;
-      if (!rowKey) throw new Error('[ElTable] prop row-key is required');
-    },
-
-    // 更新列
-    updateColumns() {
-      const states = this.states;
-      const _columns = states._columns || [];
-      states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
-      states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
-
-      if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
-        _columns[0].fixed = true;
-        states.fixedColumns.unshift(_columns[0]);
-      }
-
-      const notFixedColumns = _columns.filter(column => !column.fixed);
-      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
-
-      const leafColumns = doFlattenColumns(notFixedColumns);
-      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
-      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
-
-      states.leafColumnsLength = leafColumns.length;
-      states.fixedLeafColumnsLength = fixedLeafColumns.length;
-      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
-
-      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
-      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
-    },
-
-    // 更新 DOM
-    scheduleLayout(needUpdateColumns) {
-      if (needUpdateColumns) {
-        this.updateColumns();
-      }
-      this.table.debouncedUpdateLayout();
-    },
-
-    // 选择
-    isSelected(row) {
-      const { selection = [] } = this.states;
-      return selection.indexOf(row) > -1;
-    },
-
-    clearSelection() {
-      const states = this.states;
-      states.isAllSelected = false;
-      const oldSelection = states.selection;
-      if (oldSelection.length) {
-        states.selection = [];
-        this.table.$emit('selection-change', []);
-      }
-    },
-
-    cleanSelection() {
-      const states = this.states;
-      const { data, rowKey, selection } = states;
-      let deleted;
-      if (rowKey) {
-        deleted = [];
-        const selectedMap = getKeysMap(selection, rowKey);
-        const dataMap = getKeysMap(data, rowKey);
-        for (let key in selectedMap) {
-          if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
-            deleted.push(selectedMap[key].row);
-          }
-        }
-      } else {
-        deleted = selection.filter(item => data.indexOf(item) === -1);
-      }
-      if (deleted.length) {
-        const newSelection = selection.filter(item => deleted.indexOf(item) === -1);
-        states.selection = newSelection;
-        this.table.$emit('selection-change', newSelection.slice());
-      }
-    },
-
-    toggleRowSelection(row, selected, emitChange = true) {
-      const changed = toggleRowStatus(this.states.selection, row, selected);
-      if (changed) {
-        const newSelection = (this.states.selection || []).slice();
-        // 调用 API 修改选中值，不触发 select 事件
-        if (emitChange) {
-          this.table.$emit('select', newSelection, row);
-        }
-        this.table.$emit('selection-change', newSelection);
-      }
-    },
-
-    _toggleAllSelection() {
-      const states = this.states;
-      const { data = [], selection } = states;
-      // when only some rows are selected (but not all), select or deselect all of them
-      // depending on the value of selectOnIndeterminate
-      const value = states.selectOnIndeterminate
-        ? !states.isAllSelected
-        : !(states.isAllSelected || selection.length);
-      states.isAllSelected = value;
-
-      let selectionChanged = false;
-      data.forEach((row, index) => {
-        if (states.selectable) {
-          if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
-            selectionChanged = true;
-          }
-        } else {
-          if (toggleRowStatus(selection, row, value)) {
-            selectionChanged = true;
-          }
-        }
-      });
-
-      if (selectionChanged) {
-        this.table.$emit('selection-change', selection ? selection.slice() : []);
-      }
-      this.table.$emit('select-all', selection);
-    },
-
-    updateSelectionByRowKey() {
-      const states = this.states;
-      const { selection, rowKey, data } = states;
-      const selectedMap = getKeysMap(selection, rowKey);
-      data.forEach(row => {
-        const rowId = getRowIdentity(row, rowKey);
-        const rowInfo = selectedMap[rowId];
-        if (rowInfo) {
-          selection[rowInfo.index] = row;
-        }
-      });
-    },
-
-    updateAllSelected() {
-      const states = this.states;
-      const { selection, rowKey, selectable } = states;
-      // data 为 null 时，解构时的默认值会被忽略
-      const data = states.data || [];
-      if (data.length === 0) {
-        states.isAllSelected = false;
-        return;
-      }
-
-      let selectedMap;
-      if (rowKey) {
-        selectedMap = getKeysMap(selection, rowKey);
-      }
-      const isSelected = function(row) {
-        if (selectedMap) {
-          return !!selectedMap[getRowIdentity(row, rowKey)];
-        } else {
-          return selection.indexOf(row) !== -1;
-        }
-      };
-      let isAllSelected = true;
-      let selectedCount = 0;
-      for (let i = 0, j = data.length; i < j; i++) {
-        const item = data[i];
-        const isRowSelectable = selectable && selectable.call(null, item, i);
-        if (!isSelected(item)) {
-          if (!selectable || isRowSelectable) {
-            isAllSelected = false;
-            break;
-          }
-        } else {
-          selectedCount++;
-        }
-      }
-
-      if (selectedCount === 0) isAllSelected = false;
-      states.isAllSelected = isAllSelected;
-    },
-
-    // 过滤与排序
-    updateFilters(columns, values) {
-      if (!Array.isArray(columns)) {
-        columns = [columns];
-      }
-      const states = this.states;
-      const filters = {};
-      columns.forEach(col => {
-        states.filters[col.id] = values;
-        filters[col.columnKey || col.id] = values;
-      });
-
-      return filters;
-    },
-
-    updateSort(column, prop, order) {
-      if (this.states.sortingColumn && this.states.sortingColumn !== column) {
-        this.states.sortingColumn.order = null;
-      }
-      this.states.sortingColumn = column;
-      this.states.sortProp = prop;
-      this.states.sortOrder = order;
-    },
-
-    execFilter() {
-      const states = this.states;
-      const { _data, filters } = states;
-      let data = _data;
-
-      Object.keys(filters).forEach((columnId) => {
-        const values = states.filters[columnId];
-        if (!values || values.length === 0) return;
-        const column = getColumnById(this.states, columnId);
-        if (column && column.filterMethod) {
-          data = data.filter((row) => {
-            return values.some(value => column.filterMethod.call(null, value, row, column));
-          });
-        }
-      });
-
-      states.filteredData = data;
-    },
-
-    execSort() {
-      const states = this.states;
-      states.data = sortData(states.filteredData, states);
-    },
-
-    // 根据 filters 与 sort 去过滤 data
-    execQuery(ignore) {
-      if (!(ignore && ignore.filter)) {
-        this.execFilter();
-      }
-      this.execSort();
-    },
-
-    clearFilter(columnKeys) {
-      const states = this.states;
-      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
-
-      let panels = {};
-      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
-      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
-      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
-
-      const keys = Object.keys(panels);
-      if (!keys.length) return;
-
-      if (typeof columnKeys === 'string') {
-        columnKeys = [columnKeys];
-      }
-
-      if (Array.isArray(columnKeys)) {
-        const columns = columnKeys.map(key => getColumnByKey(states, key));
-        keys.forEach(key => {
-          const column = columns.find(col => col.id === key);
-          if (column) {
-            // TODO: 优化这里的代码
-            panels[key].filteredValue = [];
-          }
-        });
-        this.commit('filterChange', {
-          column: columns,
-          values: [],
-          silent: true,
-          multi: true
-        });
-      } else {
-        keys.forEach(key => {
-          // TODO: 优化这里的代码
-          panels[key].filteredValue = [];
-        });
-
-        states.filters = {};
-        this.commit('filterChange', {
-          column: {},
-          values: [],
-          silent: true
-        });
-      }
-    },
-
-    clearSort() {
-      const states = this.states;
-      if (!states.sortingColumn) return;
-
-      this.updateSort(null, null, null);
-      this.commit('changeSortCondition', {
-        silent: true
-      });
-    },
-
-    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用
-    setExpandRowKeysAdapter(val) {
-      // 这里会触发额外的计算，但为了兼容性，暂时这么做
-      this.setExpandRowKeys(val);
-      this.updateTreeExpandKeys(val);
-    },
-
-    // 展开行与 TreeTable 都要使用
-    toggleRowExpansionAdapter(row, expanded) {
-      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');
-      if (hasExpandColumn) {
-        this.toggleRowExpansion(row, expanded);
-      } else {
-        this.toggleTreeExpansion(row, expanded);
-      }
-    }
-  }
-});
+import Vue from 'vue';
+import merge from 'element-sim/src/utils/merge';
+import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';
+import expand from './expand';
+import current from './current';
+import tree from './tree';
+
+const sortData = (data, states) => {
+  const sortingColumn = states.sortingColumn;
+  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
+    return data;
+  }
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
+};
+
+const doFlattenColumns = (columns) => {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push.apply(result, doFlattenColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+
+export default Vue.extend({
+  data() {
+    return {
+      states: {
+        // 3.0 版本后要求必须设置该属性
+        rowKey: null,
+
+        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
+        data: [],
+
+        // 是否包含固定列
+        isComplex: false,
+
+        // 列
+        _columns: [], // 不可响应的
+        originColumns: [],
+        columns: [],
+        fixedColumns: [],
+        rightFixedColumns: [],
+        leafColumns: [],
+        fixedLeafColumns: [],
+        rightFixedLeafColumns: [],
+        leafColumnsLength: 0,
+        fixedLeafColumnsLength: 0,
+        rightFixedLeafColumnsLength: 0,
+
+        // 选择
+        isAllSelected: false,
+        selection: [],
+        reserveSelection: false,
+        selectOnIndeterminate: false,
+        selectable: null,
+
+        // 过滤
+        filters: {}, // 不可响应的
+        filteredData: null,
+
+        // 排序
+        sortingColumn: null,
+        sortProp: null,
+        sortOrder: null,
+
+        hoverRow: null
+      }
+    };
+  },
+
+  mixins: [expand, current, tree],
+
+  methods: {
+    // 检查 rowKey 是否存在
+    assertRowKey() {
+      const rowKey = this.states.rowKey;
+      if (!rowKey) throw new Error('[ElTable] prop row-key is required');
+    },
+
+    // 更新列
+    updateColumns() {
+      const states = this.states;
+      const _columns = states._columns || [];
+      states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
+      states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
+
+      if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
+        _columns[0].fixed = true;
+        states.fixedColumns.unshift(_columns[0]);
+      }
+
+      const notFixedColumns = _columns.filter(column => !column.fixed);
+      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
+
+      const leafColumns = doFlattenColumns(notFixedColumns);
+      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
+      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
+
+      states.leafColumnsLength = leafColumns.length;
+      states.fixedLeafColumnsLength = fixedLeafColumns.length;
+      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
+      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    },
+
+    // 更新 DOM
+    scheduleLayout(needUpdateColumns) {
+      if (needUpdateColumns) {
+        this.updateColumns();
+      }
+      this.table.debouncedUpdateLayout();
+    },
+
+    // 选择
+    isSelected(row) {
+      const { selection = [] } = this.states;
+      return selection.indexOf(row) > -1;
+    },
+
+    clearSelection() {
+      const states = this.states;
+      states.isAllSelected = false;
+      const oldSelection = states.selection;
+      if (oldSelection.length) {
+        states.selection = [];
+        this.table.$emit('selection-change', []);
+      }
+    },
+
+    cleanSelection() {
+      const states = this.states;
+      const { data, rowKey, selection } = states;
+      let deleted;
+      if (rowKey) {
+        deleted = [];
+        const selectedMap = getKeysMap(selection, rowKey);
+        const dataMap = getKeysMap(data, rowKey);
+        for (let key in selectedMap) {
+          if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
+            deleted.push(selectedMap[key].row);
+          }
+        }
+      } else {
+        deleted = selection.filter(item => data.indexOf(item) === -1);
+      }
+      if (deleted.length) {
+        const newSelection = selection.filter(item => deleted.indexOf(item) === -1);
+        states.selection = newSelection;
+        this.table.$emit('selection-change', newSelection.slice());
+      }
+    },
+
+    toggleRowSelection(row, selected, emitChange = true) {
+      const changed = toggleRowStatus(this.states.selection, row, selected);
+      if (changed) {
+        const newSelection = (this.states.selection || []).slice();
+        // 调用 API 修改选中值，不触发 select 事件
+        if (emitChange) {
+          this.table.$emit('select', newSelection, row);
+        }
+        this.table.$emit('selection-change', newSelection);
+      }
+    },
+
+    _toggleAllSelection() {
+      const states = this.states;
+      const { data = [], selection } = states;
+      // when only some rows are selected (but not all), select or deselect all of them
+      // depending on the value of selectOnIndeterminate
+      const value = states.selectOnIndeterminate
+        ? !states.isAllSelected
+        : !(states.isAllSelected || selection.length);
+      states.isAllSelected = value;
+
+      let selectionChanged = false;
+      data.forEach((row, index) => {
+        if (states.selectable) {
+          if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        } else {
+          if (toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        }
+      });
+
+      if (selectionChanged) {
+        this.table.$emit('selection-change', selection ? selection.slice() : []);
+      }
+      this.table.$emit('select-all', selection);
+    },
+
+    updateSelectionByRowKey() {
+      const states = this.states;
+      const { selection, rowKey, data } = states;
+      const selectedMap = getKeysMap(selection, rowKey);
+      data.forEach(row => {
+        const rowId = getRowIdentity(row, rowKey);
+        const rowInfo = selectedMap[rowId];
+        if (rowInfo) {
+          selection[rowInfo.index] = row;
+        }
+      });
+    },
+
+    updateAllSelected() {
+      const states = this.states;
+      const { selection, rowKey, selectable } = states;
+      // data 为 null 时，解构时的默认值会被忽略
+      const data = states.data || [];
+      if (data.length === 0) {
+        states.isAllSelected = false;
+        return;
+      }
+
+      let selectedMap;
+      if (rowKey) {
+        selectedMap = getKeysMap(selection, rowKey);
+      }
+      const isSelected = function(row) {
+        if (selectedMap) {
+          return !!selectedMap[getRowIdentity(row, rowKey)];
+        } else {
+          return selection.indexOf(row) !== -1;
+        }
+      };
+      let isAllSelected = true;
+      let selectedCount = 0;
+      for (let i = 0, j = data.length; i < j; i++) {
+        const item = data[i];
+        const isRowSelectable = selectable && selectable.call(null, item, i);
+        if (!isSelected(item)) {
+          if (!selectable || isRowSelectable) {
+            isAllSelected = false;
+            break;
+          }
+        } else {
+          selectedCount++;
+        }
+      }
+
+      if (selectedCount === 0) isAllSelected = false;
+      states.isAllSelected = isAllSelected;
+    },
+
+    // 过滤与排序
+    updateFilters(columns, values) {
+      if (!Array.isArray(columns)) {
+        columns = [columns];
+      }
+      const states = this.states;
+      const filters = {};
+      columns.forEach(col => {
+        states.filters[col.id] = values;
+        filters[col.columnKey || col.id] = values;
+      });
+
+      return filters;
+    },
+
+    updateSort(column, prop, order) {
+      if (this.states.sortingColumn && this.states.sortingColumn !== column) {
+        this.states.sortingColumn.order = null;
+      }
+      this.states.sortingColumn = column;
+      this.states.sortProp = prop;
+      this.states.sortOrder = order;
+    },
+
+    execFilter() {
+      const states = this.states;
+      const { _data, filters } = states;
+      let data = _data;
+
+      Object.keys(filters).forEach((columnId) => {
+        const values = states.filters[columnId];
+        if (!values || values.length === 0) return;
+        const column = getColumnById(this.states, columnId);
+        if (column && column.filterMethod) {
+          data = data.filter((row) => {
+            return values.some(value => column.filterMethod.call(null, value, row, column));
+          });
+        }
+      });
+
+      states.filteredData = data;
+    },
+
+    execSort() {
+      const states = this.states;
+      states.data = sortData(states.filteredData, states);
+    },
+
+    // 根据 filters 与 sort 去过滤 data
+    execQuery(ignore) {
+      if (!(ignore && ignore.filter)) {
+        this.execFilter();
+      }
+      this.execSort();
+    },
+
+    clearFilter(columnKeys) {
+      const states = this.states;
+      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+
+      let panels = {};
+      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+      const keys = Object.keys(panels);
+      if (!keys.length) return;
+
+      if (typeof columnKeys === 'string') {
+        columnKeys = [columnKeys];
+      }
+
+      if (Array.isArray(columnKeys)) {
+        const columns = columnKeys.map(key => getColumnByKey(states, key));
+        keys.forEach(key => {
+          const column = columns.find(col => col.id === key);
+          if (column) {
+            // TODO: 优化这里的代码
+            panels[key].filteredValue = [];
+          }
+        });
+        this.commit('filterChange', {
+          column: columns,
+          values: [],
+          silent: true,
+          multi: true
+        });
+      } else {
+        keys.forEach(key => {
+          // TODO: 优化这里的代码
+          panels[key].filteredValue = [];
+        });
+
+        states.filters = {};
+        this.commit('filterChange', {
+          column: {},
+          values: [],
+          silent: true
+        });
+      }
+    },
+
+    clearSort() {
+      const states = this.states;
+      if (!states.sortingColumn) return;
+
+      this.updateSort(null, null, null);
+      this.commit('changeSortCondition', {
+        silent: true
+      });
+    },
+
+    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用
+    setExpandRowKeysAdapter(val) {
+      // 这里会触发额外的计算，但为了兼容性，暂时这么做
+      this.setExpandRowKeys(val);
+      this.updateTreeExpandKeys(val);
+    },
+
+    // 展开行与 TreeTable 都要使用
+    toggleRowExpansionAdapter(row, expanded) {
+      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');
+      if (hasExpandColumn) {
+        this.toggleRowExpansion(row, expanded);
+      } else {
+        this.toggleTreeExpansion(row, expanded);
+      }
+    }
+  }
+});