element-plus
Version:
A Component Library for Vue 3
226 lines (221 loc) • 6.74 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var index = require('../../scrollbar/index.js');
var helper = require('./store/helper.js');
var tableLayout = require('./table-layout.js');
var index$3 = require('./table-header/index.js');
var index$2 = require('./table-body/index.js');
var index$1 = require('./table-footer/index.js');
var utilsHelper$1 = require('./table/utils-helper.js');
var utilsHelper = require('./table-header/utils-helper.js');
var styleHelper = require('./table/style-helper.js');
var keyRenderHelper = require('./table/key-render-helper.js');
var defaults = require('./table/defaults.js');
var tokens = require('./tokens.js');
var hHelper = require('./h-helper.js');
var useScrollbar = require('./composables/use-scrollbar.js');
var index$4 = require('../../../directives/mousewheel/index.js');
var index$5 = require('../../../hooks/use-locale/index.js');
var index$6 = require('../../../hooks/use-namespace/index.js');
let tableIdSeed = 1;
var _sfc_main = vue.defineComponent({
name: "ElTable",
directives: {
Mousewheel: index$4.default
},
components: {
TableHeader: index$3.default,
TableBody: index$2.default,
TableFooter: index$1.default,
ElScrollbar: index.ElScrollbar,
hColgroup: hHelper.hColgroup
},
props: defaults.default,
emits: [
"select",
"select-all",
"selection-change",
"cell-mouse-enter",
"cell-mouse-leave",
"cell-contextmenu",
"cell-click",
"cell-dblclick",
"row-click",
"row-contextmenu",
"row-dblclick",
"header-click",
"header-contextmenu",
"sort-change",
"filter-change",
"current-change",
"header-dragend",
"expand-change",
"scroll"
],
setup(props) {
const { t } = index$5.useLocale();
const ns = index$6.useNamespace("table");
const table = vue.getCurrentInstance();
vue.provide(tokens.TABLE_INJECTION_KEY, table);
const store = helper.createStore(table, props);
table.store = store;
const layout = new tableLayout.default({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader
});
table.layout = layout;
const isEmpty = vue.computed(() => (store.states.data.value || []).length === 0);
const {
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort,
updateKeyChildren
} = utilsHelper$1.default(store);
const {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
emptyBlockStyle,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
tableBodyStyles,
tableLayout: tableLayout$1,
scrollbarViewStyle,
scrollbarStyle
} = styleHelper.default(props, layout, store, table);
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar.useScrollbar();
const debouncedUpdateLayout = lodashUnified.debounce(doLayout, 50);
const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout
};
const computedSumText = vue.computed(
() => {
var _a;
return (_a = props.sumText) != null ? _a : t("el.table.sumText");
}
);
const computedEmptyText = vue.computed(() => {
var _a;
return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
});
const columns = vue.computed(() => {
return utilsHelper.convertToRows(store.states.originColumns.value)[0];
});
keyRenderHelper.default(table);
vue.onBeforeUnmount(() => {
debouncedUpdateLayout.cancel();
});
return {
ns,
layout,
store,
columns,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
isEmpty,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
tableBodyStyles,
emptyBlockStyle,
debouncedUpdateLayout,
/**
* @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection
*/
setCurrentRow,
/**
* @description returns the currently selected rows
*/
getSelectionRows,
/**
* @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected
*/
toggleRowSelection,
/**
* @description used in multiple selection Table, clear user selection
*/
clearSelection,
/**
* @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters
*/
clearFilter,
/**
* @description used in multiple selection Table, toggle select all and deselect all
*/
toggleAllSelection,
/**
* @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed
*/
toggleRowExpansion,
/**
* @description clear sorting, restore data to the original order
*/
clearSort,
/**
* @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout
*/
doLayout,
/**
* @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order
*/
sort,
/**
* @description used in lazy Table, must set `rowKey`, update key children
*/
updateKeyChildren,
t,
setDragVisible,
context: table,
computedSumText,
computedEmptyText,
tableLayout: tableLayout$1,
scrollbarViewStyle,
scrollbarStyle,
scrollBarRef,
/**
* @description scrolls to a particular set of coordinates
*/
scrollTo,
/**
* @description set horizontal scroll position
*/
setScrollLeft,
/**
* @description set vertical scroll position
*/
setScrollTop,
/**
* @description whether to allow drag the last column
*/
allowDragLastColumn: props.allowDragLastColumn
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=table.vue2.js.map