You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
518 lines
15 KiB
518 lines
15 KiB
|
7 years ago
|
(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;
|
||
|
|
|
||
|
|
})));
|