(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.ElTableTreeColumn = factory()); }(this, (function () { 'use strict'; var nestRE = /^(attrs|props|on|nativeOn|class|style|hook)$/; var index = function mergeJSXProps(objs) { return objs.reduce(function (a, b) { var aa, bb, key, nestedKey, temp; for (key in b) { aa = a[key]; bb = b[key]; if (aa && nestRE.test(key)) { // normalize class if (key === 'class') { if (typeof aa === 'string') { temp = aa; a[key] = aa = {}; aa[temp] = true; } if (typeof bb === 'string') { temp = bb; b[key] = bb = {}; bb[temp] = true; } } if (key === 'on' || key === 'nativeOn' || key === 'hook') { // merge functions for (nestedKey in bb) { aa[nestedKey] = mergeFn(aa[nestedKey], bb[nestedKey]); } } else if (Array.isArray(aa)) { a[key] = aa.concat(bb); } else if (Array.isArray(bb)) { a[key] = [aa].concat(bb); } else { for (nestedKey in bb) { aa[nestedKey] = bb[nestedKey]; } } } else { a[key] = b[key]; } } return a; }, {}); }; function mergeFn(a, b) { return function () { a.apply(this, arguments); b.apply(this, arguments); }; } var ElTableTreeColumnPropDefine = { prop: { type: String }, label: String, className: String, labelClassName: String, property: String, width: {}, minWidth: {}, renderHeader: Function, sortable: { type: [String, Boolean], default: false }, sortMethod: Function, resizable: { type: Boolean, default: true }, context: {}, columnKey: String, align: String, headerAlign: String, showTooltipWhenOverflow: Boolean, showOverflowTooltip: Boolean, fixed: [Boolean, String], formatter: Function, selectable: Function, reserveSelection: Boolean, filterMethod: Function, filteredValue: Array, filters: Array, filterMultiple: { type: Boolean, default: true }, treeKey: { type: String, default: 'id' }, childNumKey: { type: String, default: 'child_num' }, parentKey: { type: String, default: 'parent_id' }, levelKey: { type: String, default: 'depth' }, childKey: { type: String, default: 'children' }, fileIcon: { type: String, default: 'el-icon-file' }, folderIcon: { type: String, default: 'el-icon-folder' }, remote: { type: Function, default: null }, allRemote: { type: Boolean, default: false }, indentSize: { type: Number, default: 14 }, expandAll: { type: Boolean, default: false }, expandKey: { type: String, default: 'expanded' } }; function hasChild(context, scope) { var _a = context.props, childNumKey = _a.childNumKey, childKey = _a.childKey, row = scope.row; if (row[childNumKey] != undefined) { return row[childNumKey] > 0 ? true : false; } if (row[childKey] != undefined) { return row[childKey].length > 0 ? true : false; } else { return false; } } function paddingLeft(context, scope) { return parseInt(scope.row[context.props.levelKey]) * parseInt(context.props.indentSize.toString()) + 'px'; } function removeCachedExpanedRow(context, scope) { var _treeCachedExpanded = scope.store.states._treeCachedExpanded, treeKey = context.props.treeKey, row = scope.row; scope.store.states._treeCachedExpanded = _treeCachedExpanded.filter(function (crow) { return crow[treeKey] != row[treeKey]; }); } function isCachedExpanedRow(context, scope) { var _treeCachedExpanded = scope.store.states._treeCachedExpanded, treeKey = context.props.treeKey, row = scope.row; return _treeCachedExpanded.map(function (row) { return row[treeKey]; }).filter(function (_treeKey) { return _treeKey == row[treeKey]; }).length > 0; } function isNeedExpanedRow(context, scope) { if (context.props.expandAll && !scope.store.states._treeInitedExpanded.some(function (treeKey) { return treeKey == scope.row[context.props.treeKey]; })) { scope.store.states._treeInitedExpanded.push(scope.row[context.props.treeKey]); return true; } var expandKey = context.props.expandKey, row = scope.row; if (expandKey && row[expandKey] && !scope.store.states._treeInitedExpanded.some(function (treeKey) { return treeKey == row[context.props.treeKey]; })) { scope.store.states._treeInitedExpanded.push(scope.row[context.props.treeKey]); return true; } var result = isCachedExpanedRow(context, scope); if (result) removeCachedExpanedRow(context, scope); return result; } function isLoadingRow(context, scope) { var _treeRowLoading = scope.store.states._treeRowLoading, treeKey = context.props.treeKey, row = scope.row; return _treeRowLoading.map(function (row) { return row[treeKey]; }).filter(function (_treeKey) { return _treeKey == row[treeKey]; }).length > 0; } function isExpandedRow(context, scope) { var _treeRowExpanded = scope.store.states._treeRowExpanded, treeKey = context.props.treeKey, row = scope.row; return _treeRowExpanded.map(function (row) { return row[treeKey]; }).filter(function (_treeKey) { return _treeKey == row[treeKey]; }).length > 0; } function icon(scope, context) { if (isLoadingRow(context, scope)) return 'el-icon-loading'; if (isExpandedRow(context, scope)) return 'el-icon-caret-bottom'; return 'el-icon-caret-right'; } function folderIcon(context, scope) { var floder = context.props.folderIcon, floder_open = context.props.folderIcon + '-open'; return isExpandedRow(context, scope) ? floder_open : floder; } function renderDetail(h, context, scope) { if (context.data.scopedSlots && context.data.scopedSlots.default) { return context.data.scopedSlots.default(scope); } if (context.props.formatter) { return h( 'span', null, [context.props.formatter(scope.row, scope.column)] ); } return h( 'span', null, [scope.row[context.props.prop]] ); } var clone = function clone(data) { return JSON.parse(JSON.stringify(data)); }; var indexOf = function indexOf(val, arr) { var has = -1; for (var i = 0; i < arr.length; i++) { if (arr[i] == val) { has = i; break; } } return has; }; var descendantsIds = function descendantsIds(id, data, parentKey, treeKey) { var result = [], compare = [id], length = -1; while (length != compare.length) { length = compare.length; data.forEach(function (item) { if (indexOf(item[parentKey], compare) > -1 && indexOf(item[treeKey], compare) == -1) { result.push(item[treeKey]); compare.push(item[treeKey]); } }); } return result; }; var toggleExpanded = function toggleExpanded(context, scope, isExpended) { var treeKey = context.props.treeKey, states = scope.store.states; states._treeCachedExpanded = states._treeCachedExpanded.filter(function (r) { return r[treeKey] != scope.row[treeKey]; }); if (isExpended) { states._treeRowExpanded = states._treeRowExpanded.filter(function (r) { return r[treeKey] != scope.row[treeKey]; }); } else { states._treeRowExpanded.push(scope.row); } }; var toggleLoading = function toggleLoading(context, scope, isloading) { var treeKey = context.props.treeKey; if (isloading) { scope.store.states._treeRowLoading = scope.store.states._treeRowLoading.filter(function (r) { return r[treeKey] != scope.row[treeKey]; }); } else { scope.store.states._treeRowLoading.push(scope.row); } }; var commit = function commit(context, scope, list) { var owner = scope.store.table; //methods.owner(context.parent); var states = scope.store.states; // let selection = states.selection; owner.store.commit('setData', list); /* owner.clearSelection(); let data = owner.store.states._data; data.forEach(row => { if (has(context, row, selection)) { owner.toggleRowSelection(row) } }); */ }; var getIndex = function getIndex(context, scope, data) { var index = -1, treeKey = context.props.treeKey; data.forEach(function (r, i) { if (r[treeKey] == scope.row[treeKey]) { index = i; } }); return index; }; var Colspand = function Colspand(context, scope, data) { var _a = context.props, parentKey = _a.parentKey, treeKey = _a.treeKey, states = scope.store.states, row = scope.row, result = []; var removeIds = descendantsIds(row[treeKey], data, parentKey, treeKey); data = data.filter(function (item) { return !removeIds.some(function (id) { return id == item[treeKey]; }); }); var NeedToCached = states._treeRowExpanded.filter(function (item) { return removeIds.some(function (id) { return id == item[treeKey]; }); }); var _treeCachedExpanded = states._treeCachedExpanded; NeedToCached.forEach(function (item) { if (!_treeCachedExpanded.some(function (i) { return i[treeKey] == item[treeKey]; })) { states._treeCachedExpanded.push(item); } }); states._treeRowExpanded = states._treeRowExpanded.filter(function (item) { return !removeIds.some(function (id) { return id == item[treeKey]; }); }); commit(context, scope, data); }; var insertRows = function insertRows(context, scope, children, updateChild) { if (updateChild === void 0) { updateChild = false; } var _data = clone(scope.store.states._data); var _index = getIndex(context, scope, _data); var prefix = _data.slice(0, _index + 1); var i = 0; while (i < _index + 1) { _data.shift(); i++; } if (updateChild) prefix[_index][context.props.childKey] = children; _data = prefix.concat(children).concat(_data); return _data; }; var ExpandRemote = function ExpandRemote(context, scope, data) { var _a = context.props, treeKey = _a.treeKey, remote = _a.remote; toggleLoading(context, scope, false); var CallBack = function CallBack(children) { var childNumKey = context.props.childNumKey; toggleLoading(context, scope, true); var _data; if (children && children.length > 0) { var updateChild = !context.props.allRemote; _data = insertRows(context, scope, children, updateChild); } else { _data = clone(scope.store.states._data); var _index = getIndex(context, scope, _data); _data[_index][childNumKey] = 0; } commit(context, scope, _data); }; commit(context, scope, data); remote(scope.row, CallBack); // console.info(scope.store.states._treeCachedExpanded) }; var Expand = function Expand(context, scope, data) { var childKey = context.props.childKey; data = insertRows(context, scope, scope.row[childKey]); commit(context, scope, data); }; function doExpand(context, scope) { var data = clone(scope.store.states._data), childKey = context.props.childKey; // line is loading if (isLoadingRow(context, scope)) return; var isExpended = isExpandedRow(context, scope); toggleExpanded(context, scope, isExpended); if (isExpended) { return Colspand(context, scope, data); } var _a = context.props, remote = _a.remote, allRemote = _a.allRemote; if (remote && allRemote) { return ExpandRemote(context, scope, data); } if (scope.row[childKey]) { return Expand(context, scope, data); } else if (remote) { return ExpandRemote(context, scope, data); } Expand(context, scope, data); } var ElTableInject = /** @class */function () { function ElTableInject() { this.Injected = {}; } ElTableInject.prototype.isInjected = function (scope) { return this.Injected[scope.store.table.tableId]; }; ElTableInject.prototype.Inject = function (scope) { if (this.isInjected(scope)) return; this.Injected[scope.store.table.tableId] = true; scope.store.states._treeRowExpanded = []; scope.store.states._treeRowLoading = []; scope.store.states._treeCachedExpanded = []; scope.store.states._treeInitedExpanded = []; // scope.store.mutations }; return ElTableInject; }(); var ElTableInjecter = new ElTableInject(); var RenderFolder = function RenderFolder(h, context, scope) { if (isNeedExpanedRow(context, scope)) { setTimeout(function () { doExpand(context, scope); }, 15); } return h( 'span', { on: { 'click': function click(e) { e.preventDefault(); doExpand(context, scope); } } }, [h( 'span', { style: { paddingLeft: paddingLeft(context, scope) } }, [h( 'i', { 'class': icon(scope, context) }, [] ), h( 'i', { 'class': folderIcon(context, scope) }, [] )] ), renderDetail(h, context, scope)] ); }; var RenderLeaf = function RenderLeaf(h, context, scope) { return h( 'span', { style: { paddingLeft: paddingLeft(context, scope) } }, [h( 'i', { 'class': context.props.fileIcon }, [] ), renderDetail(h, context, scope)] ); }; var RenderContext = function RenderContext(h, context, scope) { ElTableInjecter.Inject(scope); var hasChild$$1 = hasChild(context, scope); if (hasChild$$1) return RenderFolder(h, context, scope); return RenderLeaf(h, context, scope); }; var ElTableTreeColumn = { name: 'el-table-tree-column', functional: true, props: ElTableTreeColumnPropDefine, render: function render(h, context) { // props will be lost when `scopedSlots` is rendering var attr = {}; Object.keys(context.props).map(function (k) { attr[k] = context.props[k]; }); var attrs = { attrs: attr }; return h( 'el-table-column', index([attrs, { scopedSlots: { default: function _default(scope) { return RenderContext(h, context, scope); } } }]), [] ); } }; if (typeof window !== 'undefined' && window.Vue) { window.Vue.component('el-table-tree-column', ElTableTreeColumn); } return ElTableTreeColumn; })));