cy-element-ui 1.1.23 → 1.1.26

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-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);
+			}
+		}
+	}
+});