element-plus
Version:
A Component Library for Vue3.0
3,662 lines • 134 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../utils/util');
var dom = require('../utils/dom');
var core = require('@popperjs/core');
var PopupManager = require('../utils/popup-manager');
var debounce = require('lodash/debounce');
var locale = require('../locale');
var directives = require('../directives');
var scrollbarWidth = require('../utils/scrollbar-width');
var isServer = require('../utils/isServer');
var ElCheckbox = require('../el-checkbox');
var ElPopper = require('../el-popper');
var ElCheckboxGroup = require('../el-checkbox-group');
var ElScrollbar = require('../el-scrollbar');
var resizeEvent = require('../utils/resize-event');
var throttle = require('lodash/throttle');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var PopupManager__default = /*#__PURE__*/_interopDefaultLegacy(PopupManager);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var scrollbarWidth__default = /*#__PURE__*/_interopDefaultLegacy(scrollbarWidth);
var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);
var ElCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(ElCheckbox);
var ElPopper__default = /*#__PURE__*/_interopDefaultLegacy(ElPopper);
var ElCheckboxGroup__default = /*#__PURE__*/_interopDefaultLegacy(ElCheckboxGroup);
var ElScrollbar__default = /*#__PURE__*/_interopDefaultLegacy(ElScrollbar);
var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
const getCell = function (event) {
let cell = event.target;
while (cell && cell.tagName.toUpperCase() !== 'HTML') {
if (cell.tagName.toUpperCase() === 'TD') {
return cell;
}
cell = cell.parentNode;
}
return null;
};
const isObject = function (obj) {
return obj !== null && typeof obj === 'object';
};
const orderBy = function (array, sortKey, reverse, sortMethod, sortBy) {
if (!sortKey &&
!sortMethod &&
(!sortBy || (Array.isArray(sortBy) && !sortBy.length))) {
return array;
}
if (typeof reverse === 'string') {
reverse = reverse === 'descending' ? -1 : 1;
}
else {
reverse = reverse && reverse < 0 ? -1 : 1;
}
const getKey = sortMethod
? null
: function (value, index) {
if (sortBy) {
if (!Array.isArray(sortBy)) {
sortBy = [sortBy];
}
return sortBy.map(function (by) {
if (typeof by === 'string') {
return util.getValueByPath(value, by);
}
else {
return by(value, index, array);
}
});
}
if (sortKey !== '$key') {
if (isObject(value) && '$value' in value)
value = value.$value;
}
return [isObject(value) ? util.getValueByPath(value, sortKey) : value];
};
const compare = function (a, b) {
if (sortMethod) {
return sortMethod(a.value, b.value);
}
for (let i = 0, len = a.key.length; i < len; i++) {
if (a.key[i] < b.key[i]) {
return -1;
}
if (a.key[i] > b.key[i]) {
return 1;
}
}
return 0;
};
return array
.map(function (value, index) {
return {
value: value,
index: index,
key: getKey ? getKey(value, index) : null,
};
})
.sort(function (a, b) {
let order = compare(a, b);
if (!order) {
order = a.index - b.index;
}
return order * reverse;
})
.map(item => item.value);
};
const getColumnById = function (table, columnId) {
let column = null;
table.columns.forEach(function (item) {
if (item.id === columnId) {
column = item;
}
});
return column;
};
const getColumnByKey = function (table, columnKey) {
let column = null;
for (let i = 0; i < table.columns.length; i++) {
const item = table.columns[i];
if (item.columnKey === columnKey) {
column = item;
break;
}
}
return column;
};
const getColumnByCell = function (table, cell) {
const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
if (matches) {
return getColumnById(table, matches[0]);
}
return null;
};
const getRowIdentity = (row, rowKey) => {
if (!row)
throw new Error('row is required when get row identity');
if (typeof rowKey === 'string') {
if (rowKey.indexOf('.') < 0) {
return row[rowKey];
}
const key = rowKey.split('.');
let current = row;
for (let i = 0; i < key.length; i++) {
current = current[key[i]];
}
return current;
}
else if (typeof rowKey === 'function') {
return rowKey.call(null, row);
}
};
const getKeysMap = function (array, rowKey) {
const arrayMap = {};
(array || []).forEach((row, index) => {
arrayMap[getRowIdentity(row, rowKey)] = { row, index };
});
return arrayMap;
};
function parseHeight(height) {
if (typeof height === 'number') {
return height;
}
if (typeof height === 'string') {
if (/^\d+(?:px)?$/.test(height)) {
return parseInt(height, 10);
}
else {
return height;
}
}
return null;
}
function toggleRowStatus(statusArr, row, newVal) {
let changed = false;
const index = statusArr.indexOf(row);
const included = index !== -1;
const addRow = () => {
statusArr.push(row);
changed = true;
};
const removeRow = () => {
statusArr.splice(index, 1);
changed = true;
};
if (typeof newVal === 'boolean') {
if (newVal && !included) {
addRow();
}
else if (!newVal && included) {
removeRow();
}
}
else {
if (included) {
removeRow();
}
else {
addRow();
}
}
return changed;
}
function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
const isNil = array => !(Array.isArray(array) && array.length);
function _walker(parent, children, level) {
cb(parent, children, level);
children.forEach(item => {
if (item[lazyKey]) {
cb(item, null, level + 1);
return;
}
const children = item[childrenKey];
if (!isNil(children)) {
_walker(item, children, level + 1);
}
});
}
root.forEach(item => {
if (item[lazyKey]) {
cb(item, null, 0);
return;
}
const children = item[childrenKey];
if (!isNil(children)) {
_walker(item, children, 0);
}
});
}
let removePopper;
function createTablePopper(trigger, popperContent, popperOptions) {
function renderContent() {
const content = document.createElement('div');
content.className = 'el-tooltip__popper is-dark';
content.innerHTML = popperContent;
content.style.zIndex = String(PopupManager__default['default'].nextZIndex());
document.body.appendChild(content);
return content;
}
function renderArrow() {
const arrow = document.createElement('div');
arrow.className = 'el-popper__arrow';
arrow.style.bottom = '-4px';
return arrow;
}
function showPopper() {
popperInstance && popperInstance.update();
}
removePopper = function removePopper() {
try {
popperInstance && popperInstance.destroy();
content && document.body.removeChild(content);
dom.off(trigger, 'mouseenter', showPopper);
}
catch (_a) { }
};
dom.off(trigger, 'mouseleave', removePopper);
let popperInstance = null;
const content = renderContent();
const arrow = renderArrow();
content.appendChild(arrow);
popperInstance = core.createPopper(trigger, content, Object.assign({ modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
{
name: 'arrow',
options: {
element: arrow,
padding: 10,
},
},
] }, popperOptions));
dom.on(trigger, 'mouseenter', showPopper);
dom.on(trigger, 'mouseleave', removePopper);
}
function useExpand(watcherData) {
const instance = vue.getCurrentInstance();
const defaultExpandAll = vue.ref(false);
const expandRows = vue.ref([]);
const updateExpandRows = () => {
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
if (defaultExpandAll.value) {
expandRows.value = data.slice();
}
else if (rowKey) {
const expandRowsMap = getKeysMap(expandRows.value, rowKey);
expandRows.value = data.reduce((prev, row) => {
const rowId = getRowIdentity(row, rowKey);
const rowInfo = expandRowsMap[rowId];
if (rowInfo) {
prev.push(row);
}
return prev;
}, []);
}
else {
expandRows.value = [];
}
};
const toggleRowExpansion = (row, expanded) => {
const changed = toggleRowStatus(expandRows.value, row, expanded);
if (changed) {
instance.emit('expand-change', row, expandRows.value.slice());
instance.store.scheduleLayout();
}
};
const setExpandRowKeys = (rowKeys) => {
instance.store.assertRowKey();
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
const keysMap = getKeysMap(data, rowKey);
expandRows.value = rowKeys.reduce((prev, cur) => {
const info = keysMap[cur];
if (info) {
prev.push(info.row);
}
return prev;
}, []);
};
const isRowExpanded = (row) => {
const rowKey = watcherData.rowKey.value;
if (rowKey) {
const expandMap = getKeysMap(expandRows.value, rowKey);
return !!expandMap[getRowIdentity(row, rowKey)];
}
return expandRows.value.indexOf(row) !== -1;
};
return {
updateExpandRows,
toggleRowExpansion,
setExpandRowKeys,
isRowExpanded,
states: {
expandRows,
defaultExpandAll,
},
};
}
function useCurrent(watcherData) {
const instance = vue.getCurrentInstance();
const _currentRowKey = vue.ref(null);
const currentRow = vue.ref(null);
const setCurrentRowKey = (key) => {
instance.store.assertRowKey();
_currentRowKey.value = key;
setCurrentRowByKey(key);
};
const restoreCurrentRowKey = () => {
_currentRowKey.value = null;
};
const setCurrentRowByKey = (key) => {
const { data = [], rowKey } = watcherData;
let _currentRow = null;
if (rowKey.value) {
_currentRow = util.arrayFind(vue.unref(data), item => getRowIdentity(item, rowKey.value) === key);
}
currentRow.value = _currentRow;
};
const updateCurrentRow = (_currentRow) => {
const oldCurrentRow = currentRow.value;
if (_currentRow && _currentRow !== oldCurrentRow) {
currentRow.value = _currentRow;
instance.emit('current-change', currentRow.value, oldCurrentRow);
return;
}
if (!_currentRow && oldCurrentRow) {
currentRow.value = null;
instance.emit('current-change', null, oldCurrentRow);
}
};
const updateCurrentRowData = () => {
const rowKey = watcherData.rowKey.value;
const data = watcherData.data.value || [];
const oldCurrentRow = currentRow.value;
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
if (rowKey) {
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
setCurrentRowByKey(currentRowKey);
}
else {
currentRow.value = null;
}
if (currentRow.value === null) {
instance.emit('current-change', null, oldCurrentRow);
}
}
else if (_currentRowKey.value) {
setCurrentRowByKey(_currentRowKey.value);
restoreCurrentRowKey();
}
};
return {
setCurrentRowKey,
restoreCurrentRowKey,
setCurrentRowByKey,
updateCurrentRow,
updateCurrentRowData,
states: {
_currentRowKey,
currentRow,
},
};
}
function useTree(watcherData) {
const expandRowKeys = vue.ref([]);
const treeData = vue.ref({});
const indent = vue.ref(16);
const lazy = vue.ref(false);
const lazyTreeNodeMap = vue.ref({});
const lazyColumnIdentifier = vue.ref('hasChildren');
const childrenColumnName = vue.ref('children');
const instance = vue.getCurrentInstance();
const normalizedData = vue.computed(() => {
if (!watcherData.rowKey.value)
return {};
const data = watcherData.data.value || [];
return normalize(data);
});
const normalizedLazyNode = vue.computed(() => {
const rowKey = watcherData.rowKey.value;
const keys = Object.keys(lazyTreeNodeMap.value);
const res = {};
if (!keys.length)
return res;
keys.forEach(key => {
if (lazyTreeNodeMap.value[key].length) {
const item = { children: [] };
lazyTreeNodeMap.value[key].forEach(row => {
const currentRowKey = getRowIdentity(row, rowKey);
item.children.push(currentRowKey);
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
res[currentRowKey] = { children: [] };
}
});
res[key] = item;
}
});
return res;
});
const normalize = data => {
const rowKey = watcherData.rowKey.value;
const res = {};
walkTreeNode(data, (parent, children, level) => {
const parentId = getRowIdentity(parent, rowKey);
if (Array.isArray(children)) {
res[parentId] = {
children: children.map(row => getRowIdentity(row, rowKey)),
level,
};
}
else if (lazy.value) {
res[parentId] = {
children: [],
lazy: true,
level,
};
}
}, childrenColumnName.value, lazyColumnIdentifier.value);
return res;
};
const updateTreeData = () => {
var _a, _b;
const nested = normalizedData.value;
const normalizedLazyNode_ = normalizedLazyNode.value;
const keys = Object.keys(nested);
const newTreeData = {};
if (keys.length) {
const oldTreeData = vue.unref(treeData);
const defaultExpandAll = (_a = instance.store) === null || _a === void 0 ? void 0 : _a.states.defaultExpandAll.value;
const rootLazyRowKeys = [];
const getExpanded = (oldValue, key) => {
const included = defaultExpandAll ||
(expandRowKeys.value && expandRowKeys.value.indexOf(key) !== -1);
return !!((oldValue && oldValue.expanded) || included);
};
keys.forEach(key => {
const oldValue = oldTreeData[key];
const newValue = Object.assign({}, nested[key]);
newValue.expanded = getExpanded(oldValue, key);
if (newValue.lazy) {
const { loaded = false, loading = false } = oldValue || {};
newValue.loaded = !!loaded;
newValue.loading = !!loading;
rootLazyRowKeys.push(key);
}
newTreeData[key] = newValue;
});
const lazyKeys = Object.keys(normalizedLazyNode_);
if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
lazyKeys.forEach(key => {
const oldValue = oldTreeData[key];
const lazyNodeChildren = normalizedLazyNode_[key].children;
if (rootLazyRowKeys.indexOf(key) !== -1) {
if (newTreeData[key].children.length !== 0) {
throw new Error('[ElTable]children must be an empty array.');
}
newTreeData[key].children = lazyNodeChildren;
}
else {
const { loaded = false, loading = false } = oldValue || {};
newTreeData[key] = {
lazy: true,
loaded: !!loaded,
loading: !!loading,
expanded: getExpanded(oldValue, key),
children: lazyNodeChildren,
level: '',
};
}
});
}
}
treeData.value = newTreeData;
(_b = instance.store) === null || _b === void 0 ? void 0 : _b.updateTableScrollY();
};
vue.watch(() => normalizedData.value, updateTreeData);
vue.watch(() => normalizedLazyNode.value, updateTreeData);
const updateTreeExpandKeys = value => {
expandRowKeys.value = value;
updateTreeData();
};
const toggleTreeExpansion = (row, expanded) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = id && treeData.value[id];
if (id && data && 'expanded' in data) {
const oldExpanded = data.expanded;
expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
treeData.value[id].expanded = expanded;
if (oldExpanded !== expanded) {
instance.emit('expand-change', row, expanded);
}
instance.store.updateTableScrollY();
}
};
const loadOrToggle = row => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = treeData.value[id];
if (lazy.value && data && 'loaded' in data && !data.loaded) {
loadData(row, id, data);
}
else {
toggleTreeExpansion(row, undefined);
}
};
const loadData = (row, key, treeNode) => {
const { load } = instance.props;
if (load && !treeData.value[key].loaded) {
treeData.value[key].loading = true;
load(row, treeNode, data => {
if (!Array.isArray(data)) {
throw new Error('[ElTable] data must be an array');
}
treeData.value[key].loading = false;
treeData.value[key].loaded = true;
treeData.value[key].expanded = true;
if (data.length) {
lazyTreeNodeMap.value[key] = data;
}
instance.emit('expand-change', row, true);
});
}
};
return {
loadData,
loadOrToggle,
toggleTreeExpansion,
updateTreeExpandKeys,
updateTreeData,
normalize,
states: {
expandRowKeys,
treeData,
indent,
lazy,
lazyTreeNodeMap,
lazyColumnIdentifier,
childrenColumnName,
},
};
}
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;
};
function useWatcher() {
const instance = vue.getCurrentInstance();
const rowKey = vue.ref(null);
const data = vue.ref([]);
const _data = vue.ref([]);
const isComplex = vue.ref(false);
const _columns = vue.ref([]);
const originColumns = vue.ref([]);
const columns = vue.ref([]);
const fixedColumns = vue.ref([]);
const rightFixedColumns = vue.ref([]);
const leafColumns = vue.ref([]);
const fixedLeafColumns = vue.ref([]);
const rightFixedLeafColumns = vue.ref([]);
const leafColumnsLength = vue.ref(0);
const fixedLeafColumnsLength = vue.ref(0);
const rightFixedLeafColumnsLength = vue.ref(0);
const isAllSelected = vue.ref(false);
const selection = vue.ref([]);
const reserveSelection = vue.ref(false);
const selectOnIndeterminate = vue.ref(false);
const selectable = vue.ref(null);
const filters = vue.ref({});
const filteredData = vue.ref(null);
const sortingColumn = vue.ref(null);
const sortProp = vue.ref(null);
const sortOrder = vue.ref(null);
const hoverRow = vue.ref(null);
vue.watch(data, () => instance.state && scheduleLayout(false), {
deep: true,
});
const assertRowKey = () => {
if (!rowKey.value)
throw new Error('[ElTable] prop row-key is required');
};
const updateColumns = () => {
fixedColumns.value = _columns.value.filter(column => column.fixed === true || column.fixed === 'left');
rightFixedColumns.value = _columns.value.filter(column => column.fixed === 'right');
if (fixedColumns.value.length > 0 &&
_columns.value[0] &&
_columns.value[0].type === 'selection' &&
!_columns.value[0].fixed) {
_columns.value[0].fixed = true;
fixedColumns.value.unshift(_columns.value[0]);
}
const notFixedColumns = _columns.value.filter(column => !column.fixed);
originColumns.value = []
.concat(fixedColumns.value)
.concat(notFixedColumns)
.concat(rightFixedColumns.value);
const leafColumns = doFlattenColumns(notFixedColumns);
const fixedLeafColumns = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns.length;
fixedLeafColumnsLength.value = fixedLeafColumns.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length;
columns.value = []
.concat(fixedLeafColumns)
.concat(leafColumns)
.concat(rightFixedLeafColumns);
isComplex.value =
fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
instance.state.doLayout();
}
else {
instance.state.debouncedUpdateLayout();
}
};
const isSelected = row => {
return selection.value.indexOf(row) > -1;
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
if (oldSelection.length) {
selection.value = [];
instance.emit('selection-change', []);
}
};
const cleanSelection = () => {
let deleted;
if (rowKey.value) {
deleted = [];
const selectedMap = getKeysMap(selection.value, rowKey.value);
const dataMap = getKeysMap(data.value, rowKey.value);
for (const key in selectedMap) {
if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
deleted.push(selectedMap[key].row);
}
}
}
else {
deleted = selection.value.filter(item => data.value.indexOf(item) === -1);
}
if (deleted.length) {
const newSelection = selection.value.filter(item => deleted.indexOf(item) === -1);
selection.value = newSelection;
instance.emit('selection-change', newSelection.slice());
}
};
const toggleRowSelection = (row, selected, emitChange = true) => {
const changed = toggleRowStatus(selection.value, row, selected);
if (changed) {
const newSelection = (selection.value || []).slice();
if (emitChange) {
instance.emit('select', newSelection, row);
}
instance.emit('selection-change', newSelection);
}
};
const _toggleAllSelection = () => {
const value = selectOnIndeterminate.value
? !isAllSelected.value
: !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
data.value.forEach((row, index) => {
if (selectable.value) {
if (selectable.value.call(null, row, index) &&
toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
}
else {
if (toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
}
});
if (selectionChanged) {
instance.emit('selection-change', selection.value ? selection.value.slice() : []);
}
instance.emit('select-all', selection.value);
};
const updateSelectionByRowKey = () => {
const selectedMap = getKeysMap(selection.value, rowKey.value);
data.value.forEach(row => {
const rowId = getRowIdentity(row, rowKey.value);
const rowInfo = selectedMap[rowId];
if (rowInfo) {
selection.value[rowInfo.index] = row;
}
});
};
const updateAllSelected = () => {
var _a;
if (((_a = data.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
isAllSelected.value = false;
return;
}
let selectedMap;
if (rowKey.value) {
selectedMap = getKeysMap(selection.value, rowKey.value);
}
const isSelected = function (row) {
if (selectedMap) {
return !!selectedMap[getRowIdentity(row, rowKey.value)];
}
else {
return selection.value.indexOf(row) !== -1;
}
};
let isAllSelected_ = true;
let selectedCount = 0;
for (let i = 0, j = (data.value || []).length; i < j; i++) {
const item = data.value[i];
const isRowSelectable = selectable.value && selectable.value.call(null, item, i);
if (!isSelected(item)) {
if (!selectable.value || isRowSelectable) {
isAllSelected_ = false;
break;
}
}
else {
selectedCount++;
}
}
if (selectedCount === 0)
isAllSelected_ = false;
isAllSelected.value = isAllSelected_;
};
const updateFilters = (columns, values) => {
if (!Array.isArray(columns)) {
columns = [columns];
}
const filters_ = {};
columns.forEach(col => {
filters.value[col.id] = values;
filters_[col.columnKey || col.id] = values;
});
return filters_;
};
const updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const execFilter = () => {
let sourceData = vue.unref(_data);
Object.keys(filters.value).forEach(columnId => {
const values = filters.value[columnId];
if (!values || values.length === 0)
return;
const column = getColumnById({
columns: columns.value,
}, columnId);
if (column && column.filterMethod) {
sourceData = sourceData.filter(row => {
return values.some(value => column.filterMethod.call(null, value, row, column));
});
}
});
filteredData.value = sourceData;
};
const execSort = () => {
data.value = sortData(filteredData.value, {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value,
});
};
const execQuery = ignore => {
if (!(ignore && ignore.filter)) {
execFilter();
}
execSort();
};
const clearFilter = columnKeys => {
const { tableHeader, fixedTableHeader, rightFixedTableHeader, } = instance.refs;
let panels = {};
if (tableHeader)
panels = Object.assign(panels, tableHeader.filterPanels);
if (fixedTableHeader)
panels = Object.assign(panels, fixedTableHeader.filterPanels);
if (rightFixedTableHeader)
panels = Object.assign(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({
columns: columns.value,
}, key));
keys.forEach(key => {
const column = columns_.find(col => col.id === key);
if (column) {
column.filteredValue = [];
}
});
instance.store.commit('filterChange', {
column: columns_,
values: [],
silent: true,
multi: true,
});
}
else {
keys.forEach(key => {
const column = columns.value.find(col => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
instance.store.commit('filterChange', {
column: {},
values: [],
silent: true,
});
}
};
const clearSort = () => {
if (!sortingColumn.value)
return;
updateSort(null, null, null);
instance.store.commit('changeSortCondition', {
silent: true,
});
};
const { setExpandRowKeys, toggleRowExpansion, updateExpandRows, states: expandStates, isRowExpanded, } = useExpand({
data,
rowKey,
});
const { updateTreeExpandKeys, toggleTreeExpansion, loadOrToggle, states: treeStates, } = useTree({
data,
rowKey,
});
const { updateCurrentRowData, updateCurrentRow, setCurrentRowKey, states: currentData, } = useCurrent({
data,
rowKey,
});
const setExpandRowKeysAdapter = val => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(({ type }) => type === 'expand');
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
}
else {
toggleTreeExpansion(row, expanded);
}
};
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
toggleRowSelection,
_toggleAllSelection,
updateSelectionByRowKey,
updateAllSelected,
updateFilters,
updateCurrentRow,
updateSort,
execFilter,
execSort,
execQuery,
clearFilter,
clearSort,
toggleRowExpansion,
setExpandRowKeysAdapter,
setCurrentRowKey,
toggleRowExpansionAdapter,
isRowExpanded,
updateExpandRows,
updateCurrentRowData,
loadOrToggle,
states: Object.assign(Object.assign(Object.assign({ rowKey,
data,
_data,
isComplex,
_columns,
originColumns,
columns,
fixedColumns,
rightFixedColumns,
leafColumns,
fixedLeafColumns,
rightFixedLeafColumns,
leafColumnsLength,
fixedLeafColumnsLength,
rightFixedLeafColumnsLength,
isAllSelected,
selection,
reserveSelection,
selectOnIndeterminate,
selectable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow }, expandStates), treeStates), currentData),
};
}
function replaceColumn(array, column) {
return array.map(item => {
var _a;
if (item.id === column.id) {
return column;
}
else if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
item.children = replaceColumn(item.children, column);
}
return item;
});
}
function sortColumn(array) {
array.forEach(item => {
var _a, _b;
item.no = (_a = item.getColumnIndex) === null || _a === void 0 ? void 0 : _a.call(item);
if ((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) {
sortColumn(item.children);
}
});
array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
const instance = vue.getCurrentInstance();
const mutations = {
setData(states, data) {
const dataInstanceChanged = vue.unref(states.data) !== data;
states.data.value = data;
states._data.value = data;
instance.store.execQuery();
instance.store.updateCurrentRowData();
instance.store.updateExpandRows();
if (vue.unref(states.reserveSelection)) {
instance.store.assertRowKey();
instance.store.updateSelectionByRowKey();
}
else {
if (dataInstanceChanged) {
instance.store.clearSelection();
}
else {
instance.store.cleanSelection();
}
}
instance.store.updateAllSelected();
if (instance.$ready) {
instance.store.scheduleLayout();
}
},
insertColumn(states, column, parent) {
const array = vue.unref(states._columns);
let newColumns = [];
if (!parent) {
array.push(column);
newColumns = array;
}
else {
if (parent && !parent.children) {
parent.children = [];
}
parent.children.push(column);
newColumns = replaceColumn(array, parent);
}
sortColumn(newColumns);
states._columns.value = newColumns;
if (column.type === 'selection') {
states.selectable.value = column.selectable;
states.reserveSelection.value = column.reserveSelection;
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
removeColumn(states, column, parent) {
const array = vue.unref(states._columns) || [];
if (parent) {
parent.children.splice(parent.children.findIndex(item => item.id === column.id), 1);
if (parent.children.length === 0) {
delete parent.children;
}
states._columns.value = replaceColumn(array, parent);
}
else {
const index = array.indexOf(column);
if (index > -1) {
array.splice(index, 1);
states._columns.value = array;
}
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
sort(states, options) {
const { prop, order, init } = options;
if (prop) {
const column = util.arrayFind(vue.unref(states.columns), column => column.property === prop);
if (column) {
column.order = order;
instance.store.updateSort(column, prop, order);
instance.store.commit('changeSortCondition', { init });
}
}
},
changeSortCondition(states, options) {
const { sortingColumn: column, sortProp: prop, sortOrder: order } = states;
if (vue.unref(order) === null) {
states.sortingColumn.value = null;
states.sortProp.value = null;
}
const ingore = { filter: true };
instance.store.execQuery(ingore);
if (!options || !(options.silent || options.init)) {
instance.emit('sort-change', {
column: vue.unref(column),
prop: vue.unref(prop),
order: vue.unref(order),
});
}
instance.store.updateTableScrollY();
},
filterChange(states, options) {
const { column, values, silent } = options;
const newFilters = instance.store.updateFilters(column, values);
instance.store.execQuery();
if (!silent) {
instance.emit('filter-change', newFilters);
}
instance.store.updateTableScrollY();
},
toggleAllSelection() {
instance.store.toggleAllSelection();
},
rowSelectedChanged(states, row) {
instance.store.toggleRowSelection(row);
instance.store.updateAllSelected();
},
setHoverRow(states, row) {
states.hoverRow.value = row;
},
setCurrentRow(states, row) {
instance.store.updateCurrentRow(row);
},
};
const commit = function (name, ...args) {
const mutations = instance.store.mutations;
if (mutations[name]) {
mutations[name].apply(instance, [instance.store.states].concat(args));
}
else {
throw new Error(`Action not found: ${name}`);
}
};
const updateTableScrollY = function () {
vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
};
const watcher = useWatcher();
return Object.assign(Object.assign({}, watcher), { mutations,
commit,
updateTableScrollY });
}
function createStore(table, initialState = {}) {
if (!table) {
throw new Error('Table is required.');
}
const store = useStore();
store.toggleAllSelection = debounce__default['default'](store._toggleAllSelection, 10);
Object.keys(initialState).forEach(key => {
store.states[key].value = initialState[key];
});
return store;
}
class TableLayout {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = [];
this.fit = true;
this.showHeader = true;
this.height = vue.ref(null);
this.scrollX = vue.ref(false);
this.scrollY = vue.ref(false);
this.bodyWidth = vue.ref(null);
this.fixedWidth = vue.ref(null);
this.rightFixedWidth = vue.ref(null);
this.tableHeight = vue.ref(null);
this.headerHeight = vue.ref(44);
this.appendHeight = vue.ref(0);
this.footerHeight = vue.ref(44);
this.viewportHeight = vue.ref(null);
this.bodyHeight = vue.ref(null);
this.fixedBodyHeight = vue.ref(null);
this.gutterWidth = scrollbarWidth__default['default']();
for (const name in options) {
if (options.hasOwnProperty(name)) {
if (vue.isRef(this[name])) {
this[name].value = options[name];
}
else {
this[name] = options[name];
}
}
}
if (!this.table) {
throw new Error('table is required for Table Layout');
}
if (!this.store) {
throw new Error('store is required for Table Layout');
}
}
updateScrollY() {
const height = this.height.value;
if (height === null)
return false;
const bodyWrapper = this.table.refs.bodyWrapper;
if (this.table.vnode.el && bodyWrapper) {
const body = bodyWrapper.querySelector('.el-table__body');
const prevScrollY = this.scrollY.value;
const scrollY = body.offsetHeight > this.bodyHeight.value;
this.scrollY.value = scrollY;
return prevScrollY !== scrollY;
}
return false;
}
setHeight(value, prop = 'height') {
if (isServer__default['default'])
return;
const el = this.table.vnode.el;
value = parseHeight(value);
this.height.value = Number(value);
if (!el && (value || value === 0))
return vue.nextTick(() => this.setHeight(value, prop));
if (typeof value === 'number') {
el.style[prop] = value + 'px';
this.updateElsHeight();
}
else if (typeof value === 'string') {
el.style[prop] = value;
this.updateElsHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, 'max-height');
}
getFlattenColumns() {
const flattenColumns = [];
const columns = this.table.store.states.columns.value;
columns.forEach(column => {
if (column.isColumnGroup) {
flattenColumns.push.apply(flattenColumns, column.columns);
}
else {
flattenColumns.push(column);
}
});
return flattenColumns;
}
updateElsHeight() {
if (!this.table.$ready)
return vue.nextTick(() => this.updateElsHeight());
const { headerWrapper: headerWrapper_, appendWrapper: appendWrapper_, footerWrapper: footerWrapper_, } = this.table.refs;
const appendWrapper = appendWrapper_;
const headerWrapper = headerWrapper_;
const footerWrapper = footerWrapper_;
this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
if (this.showHeader && !headerWrapper)
return;
const headerTrElm = headerWrapper
? headerWrapper.querySelector('.el-table__header tr')
: null;
const noneHeader = this.headerDisplayNone(headerTrElm);
const headerHeight = (this.headerHeight.value = !this.showHeader
? 0
: headerWrapper.offsetHeight);
if (this.showHeader &&
!noneHeader &&
headerWrapper.offsetWidth > 0 &&
(this.table.store.states.columns.value || []).length > 0 &&
headerHeight < 2) {
return vue.nextTick(() => this.updateElsHeight());
}
const tableHeight = (this.tableHeight.value = this.table.vnode.el.clientHeight);
const footerHeight = (this.footerHeight.value = footerWrapper
? footerWrapper.offsetHeight
: 0);
if (this.height.value !== null) {
this.bodyHeight.value =
tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
}
this.fixedBodyHeight.value = this.scrollX.value
? this.bodyHeight.value - this.gutterWidth
: this.bodyHeight.value;
this.viewportHeight.value = this.scrollX.value
? tableHeight - this.gutterWidth
: tableHeight;
this.updateScrollY();
this.notifyObservers('scrollable');
}
headerDisplayNone(elm) {
if (!elm)
return true;
let headerChild = elm;
while (headerChild.tagName !== 'DIV') {
if (getComputedStyle(headerChild).display === 'none') {
return true;
}
headerChild = headerChild.parentElement;
}
return false;
}
updateColumnsWidth() {
if (isServer__default['default'])
return;
const fit = this.fit;
const bodyWidth = this.table.vnode.el.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter(column => typeof column.width !== 'number');
flattenColumns.forEach(column => {
if (typeof column.width === 'number' && column.realWidth)
column.realWidth = null;
});
if (flexColumns.length > 0 && fit) {
flattenColumns.forEach(column => {
bodyMinWidth += column.width || column.minWidth || 80;
});
const scrollYWidth = this.scrollY.value ? this.gutterWidth : 0;
if (bodyMinWidth <= bodyWidth - scrollYWidth) {
this.scrollX.value = false;
const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
if (flexColumns.length === 1) {
flexColumns[0].realWidth =
(flexColumns[0].minWidth || 80) + totalFlexWidth;
}
else {
const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
let noneFirstWidth = 0;
flexColumns.forEach((column, index) => {
if (index === 0)
return;
const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
noneFirstWidth += flexWidth;
column.realWidth = (column.minWidth || 80) + flexWidth;
});
flexColumns[0].realWidth =
(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
}
}
else {
this.scrollX.value = true;
flexColumns.forEach(function (column) {
column.realWidth = column.minWidth;
});
}
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
this.table.state.resizeState.value.width = this.bodyWidth.value;
}
else {
flattenColumns.forEach(column => {
if (!column.width && !column.minWidth) {
column.realWidth = 80;
}
else {
column.realWidth = column.width || column.minWidth;
}
bodyMinWidth += column.realWidth;
});
this.scrollX.value = bodyMinWidth > bodyWidth;
this.bodyWidth.value = bodyMinWidth;
}
const fixedColumns = this.store.states.fixedColumns.value;
if (fixedColumns.length > 0) {
let fixedWidth = 0;
fixedColumns.forEach(function (column) {
fixedWidth += column.realWidth || column.width;
});
this.fixedWidth.value = fixedWidth;
}
const rightFixedColumns = this.store.states.rightFixedColumns.value;
if (rightFixedColumns.length > 0) {
let rightFixedWidth = 0;
rightFixedColumns.forEach(function (column) {
rightFixedWidth += column.realWidth || column.width;
});
this.rightFixedWidth.value = rightFixedWidth;
}
this.notifyObservers('columns');
this.updateElsHeight();
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(event) {
const observers = this.observers;
observers.forEach(observer => {
var _a, _b;
switch (event) {
case 'columns':
(_a = observer.state) === null || _a === void 0 ? void 0 : _a.onColumnsChange(this);
break;
case 'scrollable':
(_b = observer.state) === null || _b === void 0 ? void 0 : _b.onScrollableChange(this);
break;
default:
throw new Error(`Table Layout don't have event ${event}.`);
}
});
}
}
var script = vue.defineComponent({
name: 'ElTableFilterPanel',
components: {
ElCheckbox: ElCheckbox__default['default'],
ElCheckboxGroup: ElCheckboxGroup__default['default'],
ElScrollbar: ElScrollbar__default['default'],
ElPopper: ElPopper__default['default'],
},
directives: { ClickOutside: directives.ClickOutside },
props: {
placement: {
type: String,
default: 'bottom-start',
},
store: {
type: Object,
},
column: {
type: Object,
},
upDataColumn: {
type: Function,
},
},
setup(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
if (!parent.filterPanels.value[props.column.id]) {
parent.filterPanels.value[props.column.id] = instance;
}
const tooltipVisible = vue.ref(false);
const tooltip = vue.ref(null);
const filters = vue.computed(() => {
return props.column && props.column.filters;
});
const filterValue = vue.computed({
get: () => (props.column.filteredValue || [])[0],
set: (value) => {
if (filteredValue.value) {
if (typeof value !== 'undefined' && value !== null) {
filteredValue.value.splice(0, 1, value);
}
else {
filteredValue.value.splice(0, 1);
}
}
},
});
const filteredValue = vue.computed({
get() {
if (props.column) {
return props.column.filteredValue || [];
}
return [];
},
set(value) {
if (props.column) {
props.upDataColumn('filteredValue', value);
}
},
});
const multiple = vue.computed(() => {
if (props.column) {
return props.column.filterMultiple;
}
return true;
});
const isActive = filter => {
return filter.value === filterValue.value;
};
const hidden = () => {
tooltipVisible.value = false;
};
const showFilterPanel = (e) => {
e.stopPropagation();
tooltipVisible.value = !tooltipVisible.value;
};
const hideFilterPanel = () => {
tooltipVisible.value = false;
};
const handleConfirm = () => {
confirmFilter(filteredValue.value);
hidden();
};
const handleReset = () => {
filteredValue.value = [];
confirmFilter(filteredValue.value);
hidden();
};
const handleSelect = (_filterValue) => {
filterValue.value = _filterValue;
if (typeof _filterValue !== 'undefined' && _filterValue !== null) {
confirmFilter(filteredValue.value);
}
else {
confirmFilter([]);
}
hidden();
};
const confirmFilter = (filteredValue) => {
props.store.commit('filterChange', {
column: props.column,
values: filteredValue,
});
props.store.updateAllSelected();
};
vue.watch(tooltipVisible, value => {
if (props.column) {
props.upDataColumn('filterOpened', value);
}
}, {
immediate: true,
});
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = tooltip.value) === null || _a === void 0 ? void 0 : _a.popperRef;
});
return {
tooltipVisible,
multiple,
filteredValue,
filterValue,
filters,
handleConfirm,
handleReset,
handleSelect,
isActive,
t: locale.t,
showFilterPanel,
hideFilterPanel,
popperPaneRef,
tooltip,
};
},
});
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { class: "el-table-filter__content" };
const _hoisted_3 = { class: "el-table-filter__bottom" };
const _hoisted_4 = {
key: 1,
class: "el-table-filter__list"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_click_outside = vue.resolveDirective("click-outside");
return (vue.openBlock(), vue.createBlock(_component_el_popper, {
ref: "tooltip",
visible: _ctx.tooltipVisible,
"onUpdate:visible": _cache[6] || (_cache[6] = $event => (_ctx.tooltipVisible = $event)),
offset: 0,
placement: _ctx.placement,
"show-arrow": false,
"stop-popper-mouse-event": false,
effect: "light",
pure: "",
"manual-mode": "",
"popper-class": "el-table-filter",
"append-to-body": ""
}, {
default: vue.withCtx(() => [
(_ctx.multiple)
? (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
vue.createVNode("div", _hoisted_2, [
vue.createVNode(_component_el_scrollbar, { "wrap-class": "el-table-filter__wrap" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_checkbox_group, {
modelValue: _ctx.filteredValue,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_ctx.filteredValue = $event)),
class: "el-table-filter__checkbox-group"
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: filter.value,
label: filter.value
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(filter.text), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label"]))
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
_: 1 /* STABLE */
})
]),
vue.createVNode("div", _hoisted_3, [
vue.createVNode("button", {
class: { 'is-disabled': _ctx.filteredValue.length === 0 },
disabled: _ctx.filteredValue.length === 0,
type: "",
onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.handleConfirm && _ctx.handleConfirm(...args)))
}, vue.toDisplayString(_ctx.t('el.table.confirmFilter')), 11 /* TEXT, CLASS, PROPS */, ["disabled"]),
vue.createVNode("button", {
type: "",
onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.handleReset && _ctx.handleReset(...args)))
}, vue.toDisplayString(_ctx.t('el.table.resetFilter')), 1 /* TEXT */)
])
]))
: (vue.openBlock(), vue.createBlock("ul", _hoisted_4, [
vue.createVNode("li", {
class: [{
'is-active': _ctx.filterValue === undefined || _ctx.filterValue === null,
}, "el-table-filter__list-item"],
onClick: _cache[4] || (_cache[4] = $event => (_ctx.handleSelect(null)))
}, vue.toDisplayString(_ctx.t('el.table.clearFilter')), 3 /* TEXT, CLASS */),
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return (vue.openBlock(), vue.createBlock("li", {
key: filter.value,
class: [{ 'is-active': _ctx.isActive(filter) }, "el-table-filter__list-item"],
label: filter.value,
onClick: $event => (_ctx.handleSelect(filter.value))
}, vue.toDisplayString(filter.text), 11 /* TEXT, CLASS, PROPS */, ["label", "onClick"]))
}), 128 /* KEYED_FRAGMENT */))
]))
]),
trigger: vue.withCtx(() => [
vue.withDirectives(vue.createVNode("span", {
class: "el-table__column-filter-trigger el-none-outline",
onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.showFilterPanel && _ctx.showFilterPanel(...args)))
}, [
vue.createVNode("i", {
class: [
'el-icon-arrow-down',
_ctx.column.filterOpened ? 'el-icon-arrow-up' : '',
]
}, null, 2 /* CLASS */)
], 512 /* NEED_PATCH */), [
[_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["visible", "placement"]))
}
script.render = render;
script.__file = "packages/table/src/filter-panel.vue";
function useLayoutObserver(root) {
const instance = vue.getCurrentInstance();
vue.onBeforeMount(() => {
tableLayout.value.addObserver(instance);
});
vue.onMounted(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUpdated(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUnmounted(() => {
tableLayout.value.removeObserver(instance);
});
const tableLayout = vue.computed(() => {
const layout = root.layout;
if (!layout) {
throw new Error('Can not find table layout.');
}
return layout;
});
const onColumnsChange = (layout) => {
var _a;
const cols = (_a = root.vnode.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('colgroup > col');
if (!cols.length)
return;
const flattenColumns = layout.getFlattenColumns();
const columnsMap = {};
flattenColumns.forEach(column => {
columnsMap[column.id] = column;
});
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
const name = col.getAttribute('name');
const column = columnsMap[name];
if (column) {
col.setAttribute('width', column.realWidth || column.width);
}
}
};
const onScrollableChange = (layout) => {
const cols = root.vnode.el.querySelectorAll('colgroup > col[name=gutter]');
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
col.setAttribute('width', layout.scrollY.value ? layout.gutterWidth : '0');
}
const ths = root.vnode.el.querySelectorAll('th.gutter');
for (let i = 0, j = ths.length; i < j; i++) {
const th = ths[i];
th.style.width = layout.scrollY.value ? layout.gutterWidth + 'px' : '0';
th.style.display = layout.scrollY.value ? '' : 'none';
}
};
return {
tableLayout: tableLayout.value,
onColumnsChange,
onScrollableChange,
};
}
function useEvent(props, emit) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const handleFilterClick = (event) => {
event.stopPropagation();
return;
};
const handleHeaderClick = (event, column) => {
if (!column.filters && column.sortable) {
handleSortClick(event, column, false);
}
else if (column.filterable && !column.sortable) {
handleFilterClick(event);
}
parent.emit('header-click', column, event);
};
const handleHeaderContextMenu = (event, column) => {
parent.emit('header-contextmenu', column, event);
};
const draggingColumn = vue.ref(null);
const dragging = vue.ref(false);
const dragState = vue.ref({});
const handleMouseDown = (event, column) => {
if (isServer__default['default'])
return;
if (column.children && column.children.length > 0)
return;
if (draggingColumn.value && props.border) {
dragging.value = true;
const table = parent;
emit('set-drag-visible', true);
const tableEl = table.vnode.el;
const tableLeft = tableEl.getBoundingClientRect().left;
const columnEl = instance.vnode.el.querySelector(`th.${column.id}`);
const columnRect = columnEl.getBoundingClientRect();
const minLeft = columnRect.left - tableLeft + 30;
dom.addClass(columnEl, 'noclick');
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft,
};
const resizeProxy = table.refs.resizeProxy;
resizeProxy.style.left = dragState.value.startLeft + 'px';
document.onselectstart = function () {
return false;
};
document.ondragstart = function () {
return false;
};
const handleMouseMove = (event) => {
const deltaLeft = event.clientX - dragState.value.startMouseLeft;
const proxyLeft = dragState.value.startLeft + deltaLeft;
resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
};
const handleMouseUp = () => {
if (dragging.value) {
const { startColumnLeft, startLeft } = dragState.value;
const finalLeft = parseInt(resizeProxy.style.left, 10);
const columnWidth = finalLeft - startColumnLeft;
column.width = column.realWidth = columnWidth;
table.emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
props.store.scheduleLayout(false, true);
document.body.style.cursor = '';
dragging.value = false;
draggingColumn.value = null;
dragState.value = {};
emit('set-drag-visible', false);
}
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(function () {
dom.removeClass(columnEl, 'noclick');
}, 0);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
};
const handleMouseMove = (event, column) => {
if (column.children && column.children.length > 0)
return;
let target = event.target;
while (target && target.tagName !== 'TH') {
target = target.parentNode;
}
if (!column || !column.resizable)
return;
if (!dragging.value && props.border) {
const rect = target.getBoundingClientRect();
const bodyStyle = document.body.style;
if (rect.width > 12 && rect.right - event.pageX < 8) {
bodyStyle.cursor = 'col-resize';
if (dom.hasClass(target, 'is-sortable')) {
target.style.cursor = 'col-resize';
}
draggingColumn.value = column;
}
else if (!dragging.value) {
bodyStyle.cursor = '';
if (dom.hasClass(target, 'is-sortable')) {
target.style.cursor = 'pointer';
}
draggingColumn.value = null;
}
}
};
const handleMouseOut = () => {
if (isServer__default['default'])
return;
document.body.style.cursor = '';
};
const toggleOrder = ({ order, sortOrders }) => {
if (order === '')
return sortOrders[0];
const index = sortOrders.indexOf(order || null);
return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
};
const handleSortClick = (event, column, givenOrder) => {
event.stopPropagation();
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
let target = event.target;
while (target && target.tagName !== 'TH') {
target = target.parentNode;
}
if (target && target.tagName === 'TH') {
if (dom.hasClass(target, 'noclick')) {
dom.removeClass(target, 'noclick');
return;
}
}
if (!column.sortable)
return;
const states = props.store.states;
let sortProp = states.sortProp.value;
let sortOrder;
const sortingColumn = states.sortingColumn.value;
if (sortingColumn !== column ||
(sortingColumn === column && sortingColumn.order === null)) {
if (sortingColumn) {
sortingColumn.order = null;
}
states.sortingColumn.value = column;
sortProp = column.property;
}
if (!order) {
sortOrder = column.order = null;
}
else {
sortOrder = column.order = order;
}
states.sortProp.value = sortProp;
states.sortOrder.value = sortOrder;
parent.store.commit('changeSortCondition');
};
return {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
};
}
function useStyle(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const storeData = parent.store.states;
const isCellHidden = (index, columns) => {
let start = 0;
for (let i = 0; i < index; i++) {
start += columns[i].colSpan;
}
const after = start + columns[index].colSpan - 1;
if (props.fixed === 'left') {
return after >= storeData.fixedLeafColumnsLength.value;
}
else if (props.fixed === 'right') {
return (start <
storeData.columns.value.length -
storeData.rightFixedLeafColumnsLength.value);
}
else {
return (after < storeData.fixedLeafColumnsLength.value ||
start >=
storeData.columns.value.length -
storeData.rightFixedLeafColumnsLength.value);
}
};
const getHeaderRowStyle = (rowIndex) => {
const headerRowStyle = parent.props.headerRowStyle;
if (typeof headerRowStyle === 'function') {
return headerRowStyle.call(null, { rowIndex });
}
return headerRowStyle;
};
const getHeaderRowClass = (rowIndex) => {
const classes = [];
const headerRowClassName = parent.props.headerRowClassName;
if (typeof headerRowClassName === 'string') {
classes.push(headerRowClassName);
}
else if (typeof headerRowClassName === 'function') {
classes.push(headerRowClassName.call(null, { rowIndex }));
}
return classes.join(' ');
};
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
const headerCellStyle = parent.props.headerCellStyle;
if (typeof headerCellStyle === 'function') {
return headerCellStyle.call(null, {
rowIndex,
columnIndex,
row,
column,
});
}
return headerCellStyle;
};
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
const classes = [
column.id,
column.order,
column.headerAlign,
column.className,
column.labelClassName,
];
if (rowIndex === 0 &&
isCellHidden(columnIndex, row)) {
classes.push('is-hidden');
}
if (!column.children) {
classes.push('is-leaf');
}
if (column.sortable) {
classes.push('is-sortable');
}
const headerCellClassName = parent.props.headerCellClassName;
if (typeof headerCellClassName === 'string') {
classes.push(headerCellClassName);
}
else if (typeof headerCellClassName === 'function') {
classes.push(headerCellClassName.call(null, {
rowIndex,
columnIndex,
row,
column,
}));
}
return classes.join(' ');
};
return {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass,
};
}
const getAllColumns = (columns) => {
const result = [];
columns.forEach(column => {
if (column.children) {
result.push(column);
result.push.apply(result, getAllColumns(column.children));
}
else {
result.push(column);
}
});
return result;
};
const convertToRows = (originColumns) => {
let maxLevel = 1;
const traverse = (column, parent) => {
if (parent) {
column.level = parent.level + 1;
if (maxLevel < column.level) {
maxLevel = column.level;
}
}
if (column.children) {
let colSpan = 0;
column.children.forEach(subColumn => {
traverse(subColumn, column);
colSpan += subColumn.colSpan;
});
column.colSpan = colSpan;
}
else {
column.colSpan = 1;
}
};
originColumns.forEach(column => {
column.level = 1;
traverse(column, undefined);
});
const rows = [];
for (let i = 0; i < maxLevel; i++) {
rows.push([]);
}
const allColumns = getAllColumns(originColumns);
allColumns.forEach(column => {
if (!column.children) {
column.rowSpan = maxLevel - column.level + 1;
}
else {
column.rowSpan = 1;
}
rows[column.level - 1].push(column);
});
return rows;
};
function useUtils(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const columnRows = vue.computed(() => {
return convertToRows(props.store.states.originColumns.value);
});
const isGroup = vue.computed(() => {
const result = columnRows.value.length > 1;
if (result)
parent.state.isGroup.value = true;
return result;
});
const toggleAllSelection = (event) => {
event.stopPropagation();
parent.store.commit('toggleAllSelection');
};
return {
isGroup,
toggleAllSelection,
columnRows,
};
}
function hGutter() {
return vue.h('col', {
name: 'gutter',
});
}
function hColgroup(columns, hasGutter = false) {
return vue.h('colgroup', {}, [
...columns.map(column => vue.h('col', {
name: column.id,
key: column.id,
})),
hasGutter && hGutter(),
]);
}
var TableHeader = vue.defineComponent({
name: 'ElTableHeader',
components: {
ElCheckbox: ElCheckbox__default['default'],
},
props: {
fixed: {
type: String,
default: '',
},
store: {
required: true,
type: Object,
},
border: Boolean,
defaultSort: {
type: Object,
default() {
return {
prop: '',
order: '',
};
},
},
},
setup(props, { emit }) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const storeData = parent.store.states;
const filterPanels = vue.ref({});
const { tableLayout, onColumnsChange, onScrollableChange, } = useLayoutObserver(parent);
const hasGutter = vue.computed(() => {
return !props.fixed && tableLayout.gutterWidth;
});
vue.onMounted(() => {
vue.nextTick(() => {
const { prop, order } = props.defaultSort;
const init = true;
parent.store.commit('sort', { prop, order, init });
});
});
const { handleHeaderClick, handleHeaderContextMenu, handleMouseDown, handleMouseMove, handleMouseOut, handleSortClick, handleFilterClick, } = useEvent(props, emit);
const { getHeaderRowStyle, getHeaderRowClass, getHeaderCellStyle, getHeaderCellClass, } = useStyle(props);
const { isGroup, toggleAllSelection, columnRows } = useUtils(props);
instance.state = {
onColumnsChange,
onScrollableChange,
};
instance.filterPanels = filterPanels;
return {
columns: storeData.columns,
filterPanels,
hasGutter,
onColumnsChange,
onScrollableChange,
columnRows,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
isGroup,
toggleAllSelection,
};
},
render() {
return vue.h('table', {
border: '0',
cellpadding: '0',
cellspacing: '0',
class: 'el-table__header',
}, [
hColgroup(this.columns, this.hasGutter),
vue.h('thead', {
class: { 'is-group': this.isGroup, 'has-gutter': this.hasGutter },
}, this.columnRows.map((subColumns, rowIndex) => vue.h('tr', {
class: this.getHeaderRowClass(rowIndex),
key: rowIndex,
style: this.getHeaderRowStyle(rowIndex),
}, subColumns.map((column, cellIndex) => vue.h('th', {
class: this.getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
colspan: column.colSpan,
key: `${column.id}-thead`,
rowSpan: column.rowSpan,
style: this.getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
onClick: $event => this.handleHeaderClick($event, column),
onContextmenu: $event => this.handleHeaderContextMenu($event, column),
onMousedown: $event => this.handleMouseDown($event, column),
onMouseMove: $event => this.handleMouseMove($event, column),
onMouseout: this.handleMouseOut,
}, [
vue.h('div', {
class: [
'cell',
column.filteredValue &&
column.filteredValue.length > 0
? 'highlight'
: '',
column.labelClassName,
],
}, [
column.renderHeader
? column.renderHeader({
column,
$index: cellIndex,
store: this.store,
_self: this.$parent,
})
: column.label,
column.sortable &&
vue.h('span', {
onClick: $event => this.handleSortClick($event, column),
class: 'caret-wrapper',
}, [
vue.h('i', {
onClick: $event => this.handleSortClick($event, column, 'ascending'),
class: 'sort-caret ascending',
}),
vue.h('i', {
onClick: $event => this.handleSortClick($event, column, 'descending'),
class: 'sort-caret descending',
}),
]),
column.filterable &&
vue.h(script, {
store: this.$parent.store,
placement: column.filterPlacement || 'bottom-start',
column: column,
upDataColumn: (key, value) => {
column[key] = value;
},
}),
]),
]))))),
]);
},
});
function useEvents(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const tooltipVisible = vue.ref(false);
const tooltipContent = vue.ref('');
const tooltipTrigger = vue.ref(vue.h('div'));
const handleEvent = (event, row, name) => {
const table = parent;
const cell = getCell(event);
let column;
if (cell) {
column = getColumnByCell({
columns: props.store.states.columns.value,
}, cell);
if (column) {
table.emit(`cell-${name}`, row, column, cell, event);
}
}
table.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, 'dblclick');
};
const handleClick = (event, row) => {
props.store.commit('setCurrentRow', row);
handleEvent(event, row, 'click');
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, 'contextmenu');
};
const handleMouseEnter = debounce__default['default'](function (index) {
props.store.commit('setHoverRow', index);
}, 30);
const handleMouseLeave = debounce__default['default'](function () {
props.store.commit('setHoverRow', null);
}, 30);
const handleCellMouseEnter = (event, row) => {
const table = parent;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell({
columns: props.store.states.columns.value,
}, cell);
const hoverState = (table.hoverState = { cell, column, row });
table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
}
const cellChild = event.target.querySelector('.cell');
if (!(dom.hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
return;
}
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
const padding = (parseInt(dom.getStyle(cellChild, 'paddingLeft'), 10) || 0) +
(parseInt(dom.getStyle(cellChild, 'paddingRight'), 10) || 0);
if (rangeWidth + padding > cellChild.offsetWidth ||
cellChild.scrollWidth > cellChild.offsetWidth) {
createTablePopper(cell, cell.innerText || cell.textContent, {
placement: 'top',
strategy: 'fixed',
});
}
};
const handleCellMouseLeave = event => {
tooltipVisible.value = false;
const cell = getCell(event);
if (!cell)
return;
const oldHoverState = parent.hoverState;
parent.emit('cell-mouse-leave', oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.row, oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.column, oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.cell, event);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipVisible,
tooltipContent,
tooltipTrigger,
};
}
function useStyles(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const isColumnHidden = index => {
if (props.fixed === 'left') {
return index >= props.store.states.fixedLeafColumnsLength.value;
}
else if (props.fixed === 'right') {
return (index <
props.store.states.columns.value.length -
props.store.states.rightFixedLeafColumnsLength.value);
}
else {
return (index < props.store.states.fixedLeafColumnsLength.value ||
index >=
props.store.states.columns.value.length -
props.store.states.rightFixedLeafColumnsLength.value);
}
};
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent.props.rowStyle;
if (typeof rowStyle === 'function') {
return rowStyle.call(null, {
row,
rowIndex,
});
}
return rowStyle || null;
};
const getRowClass = (row, rowIndex) => {
const classes = ['el-table__row'];
if (parent.props.highlightCurrentRow &&
row === props.store.states.currentRow.value) {
classes.push('current-row');
}
if (props.stripe && rowIndex % 2 === 1) {
classes.push('el-table__row--striped');
}
const rowClassName = parent.props.rowClassName;
if (typeof rowClassName === 'string') {
classes.push(rowClassName);
}
else if (typeof rowClassName === 'function') {
classes.push(rowClassName.call(null, {
row,
rowIndex,
}));
}
if (props.store.states.expandRows.value.indexOf(row) > -1) {
classes.push('expanded');
}
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent.props.cellStyle;
if (typeof cellStyle === 'function') {
return cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column,
});
}
return cellStyle;
};
const getCellClass = (rowIndex, columnIndex, row, column) => {
const classes = [column.id, column.align, column.className];
if (isColumnHidden(columnIndex)) {
classes.push('is-hidden');
}
const cellClassName = parent.props.cellClassName;
if (typeof cellClassName === 'string') {
classes.push(cellClassName);
}
else if (typeof cellClassName === 'function') {
classes.push(cellClassName.call(null, {
rowIndex,
columnIndex,
row,
column,
}));
}
return classes.join(' ');
};
const getSpan = (row, column, rowIndex, columnIndex) => {
let rowspan = 1;
let colspan = 1;
const fn = parent.props.spanMethod;
if (typeof fn === 'function') {
const result = fn({
row,
column,
rowIndex,
columnIndex,
});
if (Array.isArray(result)) {
rowspan = result[0];
colspan = result[1];
}
else if (typeof result === 'object') {
rowspan = result.rowspan;
colspan = result.colspan;
}
}
return { rowspan, colspan };
};
const getColspanRealWidth = (columns, colspan, index) => {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns
.map(({ realWidth }) => realWidth)
.slice(index, index + colspan);
return widthArr.reduce((acc, width) => acc + width, -1);
};
return {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth,
isColumnHidden,
};
}
function useRender(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const { handleDoubleClick, handleClick, handleContextMenu, handleMouseEnter, handleMouseLeave, handleCellMouseEnter, handleCellMouseLeave, tooltipVisible, tooltipContent, tooltipTrigger, } = useEvents(props);
const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan, getColspanRealWidth, } = useStyles(props);
const firstDefaultColumnIndex = vue.computed(() => {
return util.arrayFindIndex(props.store.states.columns.value, ({ type }) => type === 'default');
});
const getKeyOfRow = (row, index) => {
const rowKey = parent.props.rowKey;
if (rowKey) {
return getRowIdentity(row, rowKey);
}
return index;
};
const rowRender = (row, $index, treeRowData) => {
const { indent, columns } = props.store.states;
const rowClasses = getRowClass(row, $index);
let display = true;
if (treeRowData) {
rowClasses.push('el-table__row--level-' + treeRowData.level);
display = treeRowData.display;
}
const displayStyle = display
? null
: {
display: 'none',
};
return vue.h('tr', {
style: [displayStyle, getRowStyle(row, $index)],
class: rowClasses,
key: getKeyOfRow(row, $index),
onDblclick: $event => handleDoubleClick($event, row),
onClick: $event => handleClick($event, row),
onContextmenu: $event => handleContextMenu($event, row),
onMouseenter: () => handleMouseEnter($index),
onMouseleave: handleMouseLeave,
}, columns.value.map((column, cellIndex) => {
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
if (!rowspan || !colspan) {
return null;
}
const columnData = Object.assign({}, column);
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
const data = {
store: props.store,
_self: props.context || parent,
column: columnData,
row,
$index,
};
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
data.treeNode = {
indent: treeRowData.level * indent.value,
level: treeRowData.level,
};
if (typeof treeRowData.expanded === 'boolean') {
data.treeNode.expanded = treeRowData.expanded;
if ('loading' in treeRowData) {
data.treeNode.loading = treeRowData.loading;
}
if ('noLazyChildren' in treeRowData) {
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
}
}
}
return vue.h('td', {
style: getCellStyle($index, cellIndex, row, column),
class: getCellClass($index, cellIndex, row, column),
rowspan,
colspan,
onMouseenter: $event => handleCellMouseEnter($event, row),
onMouseleave: handleCellMouseLeave,
}, [column.renderCell(data)]);
}));
};
const wrappedRowRender = (row, $index) => {
const store = props.store;
const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey, } = store.states;
const hasExpandColumn = store.states.columns.value.some(({ type }) => type === 'expand');
if (hasExpandColumn && isRowExpanded(row)) {
const renderExpanded = parent.renderExpanded;
const tr = rowRender(row, $index, undefined);
if (!renderExpanded) {
console.error('[Element Error]renderExpanded is required.');
return tr;
}
return [
[
tr,
vue.h('tr', {
key: 'expanded-row__' + tr.key,
}, [
vue.h('td', {
colspan: store.states.columns.value.length,
class: 'el-table__expanded-cell',
}, [renderExpanded({ row, $index, store })]),
]),
],
];
}
else if (Object.keys(treeData.value).length) {
assertRowKey();
const key = getRowIdentity(row, rowKey.value);
let cur = treeData.value[key];
let treeRowData = null;
if (cur) {
treeRowData = {
expanded: cur.expanded,
level: cur.level,
display: true,
};
if (typeof cur.lazy === 'boolean') {
if (typeof cur.loaded === 'boolean' && cur.loaded) {
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData)];
if (cur) {
let i = 0;
const traverse = (children, parent) => {
if (!(children && children.length && parent))
return;
children.forEach(node => {
const innerTreeRowData = {
display: parent.display && parent.expanded,
level: parent.level + 1,
expanded: false,
noLazyChildren: false,
loading: false,
};
const childKey = getRowIdentity(node, rowKey.value);
if (childKey === undefined || childKey === null) {
throw new Error('for nested data item, row-key is required.');
}
cur = Object.assign({}, treeData.value[childKey]);
if (cur) {
innerTreeRowData.expanded = cur.expanded;
cur.level = cur.level || innerTreeRowData.level;
cur.display = !!(cur.expanded && innerTreeRowData.display);
if (typeof cur.lazy === 'boolean') {
if (typeof cur.loaded === 'boolean' && cur.loaded) {
innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
innerTreeRowData.loading = cur.loading;
}
}
i++;
tmp.push(rowRender(node, $index + i, innerTreeRowData));
if (cur) {
const nodes = lazyTreeNodeMap.value[childKey] ||
node[childrenColumnName.value];
traverse(nodes, cur);
}
});
};
cur.display = true;
const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
traverse(nodes, cur);
}
return tmp;
}
else {
return rowRender(row, $index, undefined);
}
};
return {
wrappedRowRender,
tooltipVisible,
tooltipContent,
tooltipTrigger,
};
}
var TableBody = vue.defineComponent({
name: 'ElTableBody',
props: {
store: {
required: true,
type: Object,
},
stripe: Boolean,
context: {
default: () => ({}),
type: Object,
},
rowClassName: [String, Function],
rowStyle: [Object, Function],
fixed: {
type: String,
default: '',
},
highlight: Boolean,
},
setup(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const { wrappedRowRender, tooltipVisible, tooltipContent, tooltipTrigger, } = useRender(props);
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
vue.watch(props.store.states.hoverRow, (newVal, oldVal) => {
if (!props.store.states.isComplex.value || isServer__default['default'])
return;
let raf = window.requestAnimationFrame;
if (!raf) {
raf = fn => window.setTimeout(fn, 16);
}
raf(() => {
const rows = instance.vnode.el.querySelectorAll('.el-table__row');
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow) {
dom.removeClass(oldRow, 'hover-row');
}
if (newRow) {
dom.addClass(newRow, 'hover-row');
}
});
});
vue.onUnmounted(() => {
removePopper === null || removePopper === void 0 ? void 0 : removePopper();
});
return {
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipVisible,
tooltipContent,
tooltipTrigger,
};
},
render() {
const data = this.store.states.data.value || [];
return vue.h('table', {
class: 'el-table__body',
cellspacing: '0',
cellpadding: '0',
border: '0',
}, [
hColgroup(this.store.states.columns.value),
vue.h('tbody', {}, [
data.reduce((acc, row) => {
return acc.concat(this.wrappedRowRender(row, acc.length));
}, []),
]),
]);
},
});
function useMapState() {
const instance = vue.getCurrentInstance();
const table = instance.parent;
const store = table.store;
const leftFixedLeafCount = vue.computed(() => {
return store.states.fixedLeafColumnsLength.value;
});
const rightFixedLeafCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
const columnsCount = vue.computed(() => {
return store.states.columns.value.length;
});
const leftFixedCount = vue.computed(() => {
return store.states.fixedColumns.value.length;
});
const rightFixedCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
return {
leftFixedLeafCount,
rightFixedLeafCount,
columnsCount,
leftFixedCount,
rightFixedCount,
columns: store.states.columns,
};
}
function useStyle$1(props) {
const instance = vue.getCurrentInstance();
const table = instance.parent;
const store = table.store;
const { leftFixedLeafCount, rightFixedLeafCount, columnsCount, leftFixedCount, rightFixedCount, columns, } = useMapState();
const hasGutter = vue.computed(() => {
return !props.fixed && table.layout.gutterWidth;
});
const isCellHidden = (index, columns, column) => {
if (props.fixed || props.fixed === 'left') {
return index >= leftFixedLeafCount.value;
}
else if (props.fixed === 'right') {
let before = 0;
for (let i = 0; i < index; i++) {
before += columns[i].colSpan;
}
return before < columnsCount.value - rightFixedLeafCount.value;
}
else if (!props.fixed && column.fixed) {
return true;
}
else {
return (index < leftFixedCount.value ||
index >= columnsCount.value - rightFixedCount.value);
}
};
const getRowClasses = (column, cellIndex) => {
const classes = [column.id, column.align, column.labelClassName];
if (column.className) {
classes.push(column.className);
}
if (isCellHidden(cellIndex, store.states.columns.value, column)) {
classes.push('is-hidden');
}
if (!column.children) {
classes.push('is-leaf');
}
return classes;
};
return {
hasGutter,
getRowClasses,
columns,
};
}
var TableFooter = vue.defineComponent({
name: 'ElTableFooter',
props: {
fixed: {
type: String,
default: '',
},
store: {
required: true,
type: Object,
},
summaryMethod: Function,
sumText: String,
border: Boolean,
defaultSort: {
type: Object,
default() {
return {
prop: '',
order: '',
};
},
},
},
setup(props) {
const { hasGutter, getRowClasses, columns, } = useStyle$1(props);
return {
getRowClasses,
hasGutter,
columns,
};
},
render() {
let sums = [];
if (this.summaryMethod) {
sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data.value });
}
else {
this.columns.forEach((column, index) => {
if (index === 0) {
sums[index] = this.sumText;
return;
}
const values = this.store.states.data.value.map(item => Number(item[column.property]));
const precisions = [];
let notNumber = true;
values.forEach(value => {
if (!isNaN(value)) {
notNumber = false;
const decimal = ('' + value).split('.')[1];
precisions.push(decimal ? decimal.length : 0);
}
});
const precision = Math.max.apply(null, precisions);
if (!notNumber) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
}
else {
return prev;
}
}, 0);
}
else {
sums[index] = '';
}
});
}
return vue.h('table', {
class: 'el-table__footer',
cellspacing: '0',
cellpadding: '0',
border: '0',
}, [
hColgroup(this.columns, this.hasGutter),
vue.h('tbody', {
class: [{ 'has-gutter': this.hasGutter }],
}, [
vue.h('tr', {}, [
...this.columns.map((column, cellIndex) => vue.h('td', {
key: cellIndex,
colspan: column.colSpan,
rowspan: column.rowSpan,
class: this.getRowClasses(column, cellIndex),
}, [
vue.h('div', {
class: ['cell', column.labelClassName],
}, [
sums[cellIndex],
]),
])),
this.hasGutter && hGutter(),
]),
]),
]);
},
});
function useUtils$1(store, layout, shouldUpdateHeight) {
const setCurrentRow = (row) => {
store.commit('setCurrentRow', row);
};
const toggleRowSelection = (row, selected) => {
store.toggleRowSelection(row, selected, false);
store.updateAllSelected();
};
const clearSelection = () => {
store.clearSelection();
};
const clearFilter = (columnKeys) => {
store.clearFilter(columnKeys);
};
const toggleAllSelection = () => {
store.commit('toggleAllSelection');
};
const toggleRowExpansion = (row, expanded) => {
store.toggleRowExpansionAdapter(row, expanded);
};
const clearSort = () => {
store.clearSort();
};
const doLayout = () => {
if (shouldUpdateHeight.value) {
layout.updateElsHeight();
}
layout.updateColumnsWidth();
};
const sort = (prop, order) => {
store.commit('sort', { prop, order });
};
return {
setCurrentRow,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
doLayout,
sort,
};
}
function useStyle$2(props, layout, store, table, doLayout) {
const $ElEMENT = util.useGlobalConfig();
const isHidden = vue.ref(false);
const renderExpanded = vue.ref(null);
const resizeProxyVisible = vue.ref(false);
const setDragVisible = (visible) => {
resizeProxyVisible.value = visible;
};
const resizeState = vue.ref({
width: null,
height: null,
});
const isGroup = vue.ref(false);
vue.watchEffect(() => {
layout.setHeight(props.height);
});
vue.watchEffect(() => {
layout.setMaxHeight(props.maxHeight);
});
vue.watchEffect(() => {
if (!store.states.rowKey.value)
return;
store.setCurrentRowKey(props.currentRowKey);
});
vue.watch(() => props.data, () => {
table.store.commit('setData', props.data);
}, {
immediate: true,
});
vue.watchEffect(() => {
if (props.expandRowKeys) {
store.setExpandRowKeysAdapter(props.expandRowKeys);
}
});
const handleMouseLeave = () => {
table.store.commit('setHoverRow', null);
if (table.hoverState)
table.hoverState = null;
};
const handleHeaderFooterMousewheel = (event, data) => {
const { pixelX, pixelY } = data;
if (Math.abs(pixelX) >= Math.abs(pixelY)) {
table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
}
};
const shouldUpdateHeight = vue.computed(() => {
return (props.height ||
props.maxHeight ||
store.states.fixedColumns.value.length > 0 ||
store.states.rightFixedColumns.value.length > 0);
});
vue.onMounted(() => {
setScrollClass('is-scrolling-left');
bindEvents();
store.updateColumns();
doLayout();
resizeState.value = {
width: table.vnode.el.offsetWidth,
height: table.vnode.el.offsetHeight,
};
store.states.columns.value.forEach((column) => {
if (column.filteredValue && column.filteredValue.length) {
table.store.commit('filterChange', {
column,
values: column.filteredValue,
silent: true,
});
}
});
table.$ready = true;
});
const setScrollClassByEl = (el, className) => {
if (!el)
return;
const classList = Array.from(el.classList).filter(item => !item.startsWith('is-scrolling-'));
classList.push(layout.scrollX.value ? className : 'is-scrolling-none');
el.className = classList.join(' ');
};
const setScrollClass = (className) => {
const { bodyWrapper } = table.refs;
setScrollClassByEl(bodyWrapper, className);
};
const syncPostion = throttle__default['default'](function () {
const { scrollLeft, scrollTop, offsetWidth, scrollWidth, } = table.refs.bodyWrapper;
const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper, } = table.refs;
if (headerWrapper)
headerWrapper.scrollLeft = scrollLeft;
if (footerWrapper)
footerWrapper.scrollLeft = scrollLeft;
if (fixedBodyWrapper)
fixedBodyWrapper.scrollTop = scrollTop;
if (rightFixedBodyWrapper)
rightFixedBodyWrapper.scrollTop = scrollTop;
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
setScrollClass('is-scrolling-right');
}
else if (scrollLeft === 0) {
setScrollClass('is-scrolling-left');
}
else {
setScrollClass('is-scrolling-middle');
}
}, 10);
const bindEvents = () => {
table.refs.bodyWrapper.addEventListener('scroll', syncPostion, {
passive: true,
});
if (props.fit) {
resizeEvent.addResizeListener(table.vnode.el, resizeListener);
}
};
vue.onUnmounted(() => {
unbindEvents();
});
const unbindEvents = () => {
var _a;
(_a = table.refs.bodyWrapper) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', syncPostion, true);
if (props.fit) {
resizeEvent.removeResizeListener(table.vnode.el, resizeListener);
}
};
const resizeListener = () => {
if (!table.$ready)
return;
let shouldUpdateLayout = false;
const el = table.vnode.el;
const { width: oldWidth, height: oldHeight } = resizeState.value;
const width = el.offsetWidth;
if (oldWidth !== width) {
shouldUpdateLayout = true;
}
const height = el.offsetHeight;
if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
shouldUpdateLayout = true;
}
if (shouldUpdateLayout) {
resizeState.value = {
width,
height,
};
doLayout();
}
};
const tableSize = vue.computed(() => {
return props.size || $ElEMENT.size;
});
const bodyWidth = vue.computed(() => {
const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
return bodyWidth_.value
? bodyWidth_.value - (scrollY.value ? gutterWidth : 0) + 'px'
: '';
});
const bodyHeight = vue.computed(() => {
const headerHeight = layout.headerHeight.value || 0;
const bodyHeight = layout.bodyHeight.value;
const footerHeight = layout.footerHeight.value || 0;
if (props.height) {
return {
height: bodyHeight ? bodyHeight + 'px' : '',
};
}
else if (props.maxHeight) {
const maxHeight = parseHeight(props.maxHeight);
if (typeof maxHeight === 'number') {
return {
'max-height': maxHeight -
footerHeight -
(props.showHeader ? headerHeight : 0) +
'px',
};
}
}
return {};
});
const emptyBlockStyle = vue.computed(() => {
if (props.data && props.data.length)
return null;
let height = '100%';
if (layout.appendHeight.value) {
height = `calc(100% - ${layout.appendHeight.value}px)`;
}
return {
width: bodyWidth.value,
height,
};
});
const handleFixedMousewheel = (event, data) => {
const bodyWrapper = table.refs.bodyWrapper;
if (Math.abs(data.spinY) > 0) {
const currentScrollTop = bodyWrapper.scrollTop;
if (data.pixelY < 0 && currentScrollTop !== 0) {
event.preventDefault();
}
if (data.pixelY > 0 &&
bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
event.preventDefault();
}
bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
}
else {
bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
}
};
const fixedHeight = vue.computed(() => {
if (props.maxHeight) {
if (props.showSummary) {
return {
bottom: 0,
};
}
return {
bottom: layout.scrollX.value && props.data.length
? layout.gutterWidth + 'px'
: '',
};
}
else {
if (props.showSummary) {
return {
height: layout.tableHeight.value
? layout.tableHeight.value + 'px'
: '',
};
}
return {
height: layout.viewportHeight.value
? layout.viewportHeight.value + 'px'
: '',
};
}
});
const fixedBodyHeight = vue.computed(() => {
if (props.height) {
return {
height: layout.fixedBodyHeight.value
? layout.fixedBodyHeight.value + 'px'
: '',
};
}
else if (props.maxHeight) {
let maxHeight = parseHeight(props.maxHeight);
if (typeof maxHeight === 'number') {
maxHeight = layout.scrollX.value
? maxHeight - layout.gutterWidth
: maxHeight;
if (props.showHeader) {
maxHeight -= layout.headerHeight.value;
}
maxHeight -= layout.footerHeight.value;
return {
'max-height': maxHeight + 'px',
};
}
}
return {};
});
return {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
bodyHeight,
emptyBlockStyle,
handleFixedMousewheel,
fixedHeight,
fixedBodyHeight,
resizeProxyVisible,
bodyWidth,
resizeState,
};
}
let tableIdSeed = 1;
var script$1 = vue.defineComponent({
name: 'ElTable',
directives: {
Mousewheel: directives.Mousewheel,
},
components: {
TableHeader,
TableBody,
TableFooter,
},
props: {
data: {
type: Array,
default: function () {
return [];
},
},
size: String,
width: [String, Number],
height: [String, Number],
maxHeight: [String, Number],
fit: {
type: Boolean,
default: true,
},
stripe: Boolean,
border: Boolean,
rowKey: [String, Function],
showHeader: {
type: Boolean,
default: true,
},
showSummary: Boolean,
sumText: String,
summaryMethod: Function,
rowClassName: [String, Function],
rowStyle: [Object, Function],
cellClassName: [String, Function],
cellStyle: [Object, Function],
headerRowClassName: [String, Function],
headerRowStyle: [Object, Function],
headerCellClassName: [String, Function],
headerCellStyle: [Object, Function],
highlightCurrentRow: Boolean,
currentRowKey: [String, Number],
emptyText: String,
expandRowKeys: Array,
defaultExpandAll: Boolean,
defaultSort: Object,
tooltipEffect: String,
spanMethod: Function,
selectOnIndeterminate: {
type: Boolean,
default: true,
},
indent: {
type: Number,
default: 16,
},
treeProps: {
type: Object,
default() {
return {
hasChildren: 'hasChildren',
children: 'children',
};
},
},
lazy: Boolean,
load: Function,
},
emits: [
'select',
'select-all',
'selection-change',
'cell-mouse-enter',
'cell-mouse-leave',
'cell-click',
'cell-dblclick',
'row-click',
'row-contextmenu',
'row-dblclick',
'header-click',
'header-contextmenu',
'sort-change',
'filter-change',
'current-change',
'header-dragend',
'expand-change',
],
setup(props) {
let table = vue.getCurrentInstance();
const store = createStore(table, {
rowKey: props.rowKey,
defaultExpandAll: props.defaultExpandAll,
selectOnIndeterminate: props.selectOnIndeterminate,
indent: props.indent,
lazy: props.lazy,
lazyColumnIdentifier: props.treeProps.hasChildren || 'hasChildren',
childrenColumnName: props.treeProps.children || 'children',
data: props.data,
});
table.store = store;
const layout = new TableLayout({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader,
});
table.layout = layout;
const shouldUpdateHeight = vue.computed(() => {
return (props.height ||
props.maxHeight ||
store.states.fixedColumns.value.length > 0 ||
store.states.rightFixedColumns.value.length > 0);
});
const { setCurrentRow, toggleRowSelection, clearSelection, clearFilter, toggleAllSelection, toggleRowExpansion, clearSort, doLayout, sort, } = useUtils$1(store, layout, shouldUpdateHeight);
const { isHidden, renderExpanded, setDragVisible, isGroup, handleMouseLeave, handleHeaderFooterMousewheel, tableSize, bodyHeight, emptyBlockStyle, handleFixedMousewheel, fixedHeight, fixedBodyHeight, resizeProxyVisible, bodyWidth, resizeState, } = useStyle$2(props, layout, store, table, doLayout);
const debouncedUpdateLayout = debounce__default['default'](() => doLayout(), 50);
const tableId = 'el-table_' + tableIdSeed++;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout,
};
return {
layout,
store,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
bodyHeight,
emptyBlockStyle,
debouncedUpdateLayout,
handleFixedMousewheel,
fixedHeight,
fixedBodyHeight,
setCurrentRow,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
doLayout,
sort,
t: locale.t,
setDragVisible,
context: table,
};
},
});
const _hoisted_1$1 = {
ref: "hiddenColumns",
class: "hidden-columns"
};
const _hoisted_2$1 = {
key: 0,
ref: "headerWrapper",
class: "el-table__header-wrapper"
};
const _hoisted_3$1 = { class: "el-table__empty-text" };
const _hoisted_4$1 = {
key: 1,
ref: "appendWrapper",
class: "el-table__append-wrapper"
};
const _hoisted_5 = {
key: 1,
ref: "footerWrapper",
class: "el-table__footer-wrapper"
};
const _hoisted_6 = {
key: 0,
ref: "fixedHeaderWrapper",
class: "el-table__fixed-header-wrapper"
};
const _hoisted_7 = {
key: 1,
ref: "fixedFooterWrapper",
class: "el-table__fixed-footer-wrapper"
};
const _hoisted_8 = {
key: 0,
ref: "rightFixedHeaderWrapper",
class: "el-table__fixed-header-wrapper"
};
const _hoisted_9 = {
key: 1,
ref: "rightFixedFooterWrapper",
class: "el-table__fixed-footer-wrapper"
};
const _hoisted_10 = {
ref: "resizeProxy",
class: "el-table__column-resize-proxy"
};
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_table_header = vue.resolveComponent("table-header");
const _component_table_body = vue.resolveComponent("table-body");
const _component_table_footer = vue.resolveComponent("table-footer");
const _directive_mousewheel = vue.resolveDirective("mousewheel");
return (vue.openBlock(), vue.createBlock("div", {
class: [[
{
'el-table--fit': _ctx.fit,
'el-table--striped': _ctx.stripe,
'el-table--border': _ctx.border || _ctx.isGroup,
'el-table--hidden': _ctx.isHidden,
'el-table--group': _ctx.isGroup,
'el-table--fluid-height': _ctx.maxHeight,
'el-table--scrollable-x': _ctx.layout.scrollX.value,
'el-table--scrollable-y': _ctx.layout.scrollY.value,
'el-table--enable-row-hover': !_ctx.store.states.isComplex.value,
'el-table--enable-row-transition':
(_ctx.store.states.data.value || []).length !== 0 &&
(_ctx.store.states.data.value || []).length < 100,
},
_ctx.tableSize ? `el-table--${_ctx.tableSize}` : '',
], "el-table"],
onMouseleave: _cache[1] || (_cache[1] = $event => (_ctx.handleMouseLeave()))
}, [
vue.createVNode("div", _hoisted_1$1, [
vue.renderSlot(_ctx.$slots, "default")
], 512 /* NEED_PATCH */),
(_ctx.showHeader)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_2$1, [
vue.createVNode(_component_table_header, {
ref: "tableHeader",
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
style: {
width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + 'px' : '',
},
onSetDragVisible: _ctx.setDragVisible
}, null, 8 /* PROPS */, ["border", "default-sort", "store", "style", "onSetDragVisible"])
], 512 /* NEED_PATCH */)), [
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
])
: vue.createCommentVNode("v-if", true),
vue.createVNode("div", {
ref: "bodyWrapper",
style: [_ctx.bodyHeight],
class: "el-table__body-wrapper"
}, [
vue.createVNode(_component_table_body, {
context: _ctx.context,
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: {
width: _ctx.bodyWidth,
}
}, null, 8 /* PROPS */, ["context", "highlight", "row-class-name", "row-style", "store", "stripe", "style"]),
(!_ctx.data || _ctx.data.length === 0)
? (vue.openBlock(), vue.createBlock("div", {
key: 0,
ref: "emptyBlock",
style: _ctx.emptyBlockStyle,
class: "el-table__empty-block"
}, [
vue.createVNode("span", _hoisted_3$1, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.emptyText || _ctx.t('el.table.emptyText')), 1 /* TEXT */)
])
])
], 4 /* STYLE */))
: vue.createCommentVNode("v-if", true),
(_ctx.$slots.append)
? (vue.openBlock(), vue.createBlock("div", _hoisted_4$1, [
vue.renderSlot(_ctx.$slots, "append")
], 512 /* NEED_PATCH */))
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */),
(_ctx.showSummary)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_5, [
vue.createVNode(_component_table_footer, {
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
style: {
width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + 'px' : '',
},
"sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
"summary-method": _ctx.summaryMethod
}, null, 8 /* PROPS */, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
], 512 /* NEED_PATCH */)), [
[vue.vShow, _ctx.data && _ctx.data.length > 0],
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
])
: vue.createCommentVNode("v-if", true),
(_ctx.store.states.fixedColumns.value.length > 0)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
key: 2,
ref: "fixedWrapper",
style: [
{
width: _ctx.layout.fixedWidth.value ? _ctx.layout.fixedWidth.value + 'px' : '',
},
_ctx.fixedHeight,
],
class: "el-table__fixed"
}, [
(_ctx.showHeader)
? (vue.openBlock(), vue.createBlock("div", _hoisted_6, [
vue.createVNode(_component_table_header, {
ref: "fixedTableHeader",
border: _ctx.border,
store: _ctx.store,
style: {
width: _ctx.bodyWidth,
},
fixed: "left",
onSetDragVisible: _ctx.setDragVisible
}, null, 8 /* PROPS */, ["border", "store", "style", "onSetDragVisible"])
], 512 /* NEED_PATCH */))
: vue.createCommentVNode("v-if", true),
vue.createVNode("div", {
ref: "fixedBodyWrapper",
style: [
{
top: _ctx.layout.headerHeight.value + 'px',
},
_ctx.fixedBodyHeight,
],
class: "el-table__fixed-body-wrapper"
}, [
vue.createVNode(_component_table_body, {
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: {
width: _ctx.bodyWidth,
},
fixed: "left"
}, null, 8 /* PROPS */, ["highlight", "row-class-name", "row-style", "store", "stripe", "style"]),
(_ctx.$slots.append)
? (vue.openBlock(), vue.createBlock("div", {
key: 0,
style: { height: _ctx.layout.appendHeight.value + 'px' },
class: "el-table__append-gutter"
}, null, 4 /* STYLE */))
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */),
(_ctx.showSummary)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_7, [
vue.createVNode(_component_table_footer, {
border: _ctx.border,
store: _ctx.store,
style: {
width: _ctx.bodyWidth,
},
"sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
"summary-method": _ctx.summaryMethod,
fixed: "left"
}, null, 8 /* PROPS */, ["border", "store", "style", "sum-text", "summary-method"])
], 512 /* NEED_PATCH */)), [
[vue.vShow, _ctx.data && _ctx.data.length > 0]
])
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */)), [
[_directive_mousewheel, _ctx.handleFixedMousewheel]
])
: vue.createCommentVNode("v-if", true),
(_ctx.store.states.rightFixedColumns.value.length > 0)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
key: 3,
ref: "rightFixedWrapper",
style: [
{
width: _ctx.layout.rightFixedWidth.value
? _ctx.layout.rightFixedWidth.value + 'px'
: '',
right: _ctx.layout.scrollY.value
? (_ctx.border ? _ctx.layout.gutterWidth : _ctx.layout.gutterWidth || 0) + 'px'
: '',
},
_ctx.fixedHeight,
],
class: "el-table__fixed-right"
}, [
(_ctx.showHeader)
? (vue.openBlock(), vue.createBlock("div", _hoisted_8, [
vue.createVNode(_component_table_header, {
ref: "rightFixedTableHeader",
border: _ctx.border,
store: _ctx.store,
style: {
width: _ctx.bodyWidth,
},
fixed: "right",
onSetDragVisible: _ctx.setDragVisible
}, null, 8 /* PROPS */, ["border", "store", "style", "onSetDragVisible"])
], 512 /* NEED_PATCH */))
: vue.createCommentVNode("v-if", true),
vue.createVNode("div", {
ref: "rightFixedBodyWrapper",
style: [{ top: _ctx.layout.headerHeight.value + 'px' }, _ctx.fixedBodyHeight],
class: "el-table__fixed-body-wrapper"
}, [
vue.createVNode(_component_table_body, {
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: {
width: _ctx.bodyWidth,
},
fixed: "right"
}, null, 8 /* PROPS */, ["highlight", "row-class-name", "row-style", "store", "stripe", "style"]),
(_ctx.$slots.append)
? (vue.openBlock(), vue.createBlock("div", {
key: 0,
style: { height: _ctx.layout.appendHeight.value + 'px' },
class: "el-table__append-gutter"
}, null, 4 /* STYLE */))
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */),
(_ctx.showSummary)
? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_9, [
vue.createVNode(_component_table_footer, {
border: _ctx.border,
store: _ctx.store,
style: {
width: _ctx.bodyWidth,
},
"sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
"summary-method": _ctx.summaryMethod,
fixed: "right"
}, null, 8 /* PROPS */, ["border", "store", "style", "sum-text", "summary-method"])
], 512 /* NEED_PATCH */)), [
[vue.vShow, _ctx.data && _ctx.data.length > 0]
])
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */)), [
[_directive_mousewheel, _ctx.handleFixedMousewheel]
])
: vue.createCommentVNode("v-if", true),
(_ctx.store.states.rightFixedColumns.value.length > 0)
? (vue.openBlock(), vue.createBlock("div", {
key: 4,
ref: "rightFixedPatch",
style: {
width: _ctx.layout.scrollY.value ? _ctx.layout.gutterWidth + 'px' : '0',
height: _ctx.layout.headerHeight.value + 'px',
},
class: "el-table__fixed-right-patch"
}, null, 4 /* STYLE */))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createVNode("div", _hoisted_10, null, 512 /* NEED_PATCH */), [
[vue.vShow, _ctx.resizeProxyVisible]
])
], 34 /* CLASS, HYDRATE_EVENTS */))
}
script$1.render = render$1;
script$1.__file = "packages/table/src/table.vue";
script$1.install = (app) => {
app.component(script$1.name, script$1);
};
const _Table = script$1;
exports.default = _Table;