vxe-table-plugin-virtual-tree
Version:
基于 vxe-table 的表格插件，实现简单的虚拟树表格（属于内测阶段）
1,194 lines (1,020 loc) • 39 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define("vxe-table-plugin-virtual-tree", ["exports", "xe-utils"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("xe-utils"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.XEUtils);
global.VXETablePluginVirtualTree = mod.exports.default;
}
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _xeUtils) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports["default"] = _exports.VXETablePluginVirtualTree = void 0;
_xeUtils = _interopRequireDefault(_xeUtils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function hasChilds(_vm, row) {
var childList = row[_vm.treeOpts.children];
return childList && childList.length;
}
function renderDefaultForm(h, _vm) {
var proxyConfig = _vm.proxyConfig,
proxyOpts = _vm.proxyOpts,
formData = _vm.formData,
formConfig = _vm.formConfig,
formOpts = _vm.formOpts;
if (formConfig && formOpts.items && formOpts.items.length) {
if (!formOpts.inited) {
formOpts.inited = true;
var beforeItem = proxyOpts.beforeItem;
if (proxyOpts && beforeItem) {
formOpts.items.forEach(function (item) {
beforeItem.call(_vm, {
$grid: _vm,
item: item
});
});
}
}
return [h('vxe-form', {
props: Object.assign({}, formOpts, {
data: proxyConfig && proxyOpts.form ? formData : formOpts.data
}),
on: {
submit: _vm.submitEvent,
reset: _vm.resetEvent,
'submit-invalid': _vm.submitInvalidEvent,
'toggle-collapse': _vm.togglCollapseEvent
},
ref: 'form'
})];
}
return [];
}
function getToolbarSlots(_vm) {
var $scopedSlots = _vm.$scopedSlots,
toolbarOpts = _vm.toolbarOpts;
var toolbarOptSlots = toolbarOpts.slots;
var $buttons;
var $tools;
var slots = {};
if (toolbarOptSlots) {
$buttons = toolbarOptSlots.buttons;
$tools = toolbarOptSlots.tools;
if ($buttons && $scopedSlots[$buttons]) {
$buttons = $scopedSlots[$buttons];
}
if ($tools && $scopedSlots[$tools]) {
$tools = $scopedSlots[$tools];
}
}
if ($buttons) {
slots.buttons = $buttons;
}
if ($tools) {
slots.tools = $tools;
}
return slots;
}
function getPagerSlots(_vm) {
var $scopedSlots = _vm.$scopedSlots,
pagerOpts = _vm.pagerOpts;
var pagerOptSlots = pagerOpts.slots;
var slots = {};
var $left;
var $right;
if (pagerOptSlots) {
$left = pagerOptSlots.left;
$right = pagerOptSlots.right;
if ($left && $scopedSlots[$left]) {
$left = $scopedSlots[$left];
}
if ($right && $scopedSlots[$right]) {
$right = $scopedSlots[$right];
}
}
if ($left) {
slots.left = $left;
}
if ($right) {
slots.right = $right;
}
return slots;
}
function getTableOns(_vm) {
var $listeners = _vm.$listeners,
proxyConfig = _vm.proxyConfig,
proxyOpts = _vm.proxyOpts;
var ons = {};
_xeUtils["default"].each($listeners, function (cb, type) {
ons[type] = function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_vm.$emit.apply(_vm, [type].concat(args));
};
});
ons['checkbox-all'] = _vm.checkboxAllEvent;
ons['checkbox-change'] = _vm.checkboxChangeEvent;
if (proxyConfig) {
if (proxyOpts.sort) {
ons['sort-change'] = _vm.sortChangeEvent;
}
if (proxyOpts.filter) {
ons['filter-change'] = _vm.filterChangeEvent;
}
}
return ons;
}
function registerComponent(vxetable) {
var setup = vxetable.setup,
t = vxetable.t,
Grid = vxetable.Grid,
Table = vxetable.Table;
var GlobalConfig = setup({});
var propKeys = Object.keys(Table.props).filter(function (name) {
return ['data', 'treeConfig'].indexOf(name) === -1;
});
var options = {
name: 'VxeVirtualTree',
"extends": Grid,
data: function data() {
return {
removeList: [],
treeLazyLoadeds: []
};
},
computed: {
treeOpts: function treeOpts() {
return Object.assign({}, GlobalConfig.table.treeConfig, this.treeConfig);
},
checkboxOpts: function checkboxOpts() {
return Object.assign({}, GlobalConfig.table.checkboxConfig, this.checkboxConfig);
},
tableExtendProps: function tableExtendProps() {
var _this = this;
var rest = {};
propKeys.forEach(function (key) {
rest[key] = _this[key];
});
if (rest.checkboxConfig) {
rest.checkboxConfig = this.checkboxOpts;
}
return rest;
}
},
watch: {
columns: function columns(value) {
this.handleColumns(value);
},
data: function data(value) {
this.loadData(value);
}
},
created: function created() {
var $vxe = this.$vxe,
treeOpts = this.treeOpts,
data = this.data,
columns = this.columns;
Object.assign(this, {
fullTreeData: [],
treeTableData: [],
fullTreeRowMap: new Map()
});
if (this.keepSource) {
console.error($vxe.t('vxe.error.notProp', ['keep-source']));
}
if (treeOpts.line) {
console.error($vxe.t('vxe.error.notProp', ['checkbox-config.line']));
}
if (columns) {
this.handleColumns(columns);
}
if (data) {
this.reloadData(data);
}
},
render: function render(h) {
var _ref;
var vSize = this.vSize,
isZMax = this.isZMax;
var $scopedSlots = this.$scopedSlots;
var hasForm = !!($scopedSlots.form || this.formConfig);
var hasToolbar = !!($scopedSlots.toolbar || this.toolbarConfig || this.toolbar);
var hasPager = !!($scopedSlots.pager || this.pagerConfig);
return h('div', {
"class": ['vxe-grid', 'vxe-virtual-tree', (_ref = {}, _defineProperty(_ref, "size--".concat(vSize), vSize), _defineProperty(_ref, 't--animat', !!this.animat), _defineProperty(_ref, 'is--round', this.round), _defineProperty(_ref, 'is--maximize', isZMax), _defineProperty(_ref, 'is--loading', this.loading || this.tableLoading), _ref)],
style: this.renderStyle
}, [
/**
* 渲染表单
*/
hasForm ? h('div', {
ref: 'formWrapper',
staticClass: 'vxe-grid--form-wrapper'
}, $scopedSlots.form ? $scopedSlots.form.call(this, {
$grid: this
}, h) : renderDefaultForm(h, this)) : null,
/**
* 渲染工具栏
*/
hasToolbar ? h('div', {
ref: 'toolbarWrapper',
"class": 'vxe-grid--toolbar-wrapper'
}, $scopedSlots.toolbar ? $scopedSlots.toolbar.call(this, {
$grid: this
}, h) : [h('vxe-toolbar', {
props: this.toolbarOpts,
ref: 'xToolbar',
scopedSlots: getToolbarSlots(this)
})]) : null,
/**
* 渲染表格顶部区域
*/
$scopedSlots.top ? h('div', {
ref: 'topWrapper',
staticClass: 'vxe-grid--top-wrapper'
}, $scopedSlots.top.call(this, {
$grid: this
}, h)) : null,
/**
* 渲染表格
*/
h('vxe-table', {
props: this.tableProps,
on: getTableOns(this),
scopedSlots: $scopedSlots,
ref: 'xTable'
}),
/**
* 渲染表格底部区域
*/
$scopedSlots.bottom ? h('div', {
ref: 'bottomWrapper',
staticClass: 'vxe-grid--bottom-wrapper'
}, $scopedSlots.bottom.call(this, {
$grid: this
}, h)) : null,
/**
* 渲染分页
*/
hasPager ? h('div', {
ref: 'pagerWrapper',
staticClass: 'vxe-grid--pager-wrapper'
}, $scopedSlots.pager ? $scopedSlots.pager.call(this, {
$grid: this
}, h) : [h('vxe-pager', {
props: this.pagerProps,
on: {
'page-change': this.pageChangeEvent
},
scopedSlots: getPagerSlots(this)
})]) : null]);
},
methods: {
loadColumn: function loadColumn(columns) {
var _this2 = this;
return this.$nextTick().then(function () {
var $vxe = _this2.$vxe,
$scopedSlots = _this2.$scopedSlots,
renderTreeIcon = _this2.renderTreeIcon,
treeOpts = _this2.treeOpts;
_xeUtils["default"].eachTree(columns, function (column) {
if (column.treeNode) {
if (!column.slots) {
column.slots = {};
}
column.slots.icon = renderTreeIcon;
}
if (column.slots) {
_xeUtils["default"].each(column.slots, function (func, name, colSlots) {
// 兼容 v2
if (!_xeUtils["default"].isFunction(func)) {
if ($scopedSlots[func]) {
colSlots[name] = $scopedSlots[func];
} else {
colSlots[name] = null;
console.error($vxe.t('vxe.error.notSlot', [func]));
}
}
});
}
}, treeOpts);
_this2.$refs.xTable.loadColumn(columns);
});
},
renderTreeIcon: function renderTreeIcon(params, h, cellVNodes) {
var _this3 = this;
var treeLazyLoadeds = this.treeLazyLoadeds,
treeOpts = this.treeOpts;
var isHidden = params.isHidden,
row = params.row;
var children = treeOpts.children,
hasChild = treeOpts.hasChild,
indent = treeOpts.indent,
lazy = treeOpts.lazy,
trigger = treeOpts.trigger,
iconLoaded = treeOpts.iconLoaded,
showIcon = treeOpts.showIcon,
iconOpen = treeOpts.iconOpen,
iconClose = treeOpts.iconClose;
var rowChilds = row[children];
var hasLazyChilds = false;
var isAceived = false;
var isLazyLoaded = false;
var on = {};
if (!isHidden) {
isAceived = row._X_EXPAND;
if (lazy) {
isLazyLoaded = treeLazyLoadeds.indexOf(row) > -1;
hasLazyChilds = row[hasChild];
}
}
if (!trigger || trigger === 'default') {
on.click = function (evnt) {
return _this3.triggerTreeExpandEvent(evnt, params);
};
}
return [h('div', {
"class": ['vxe-cell--tree-node', {
'is--active': isAceived
}],
style: {
paddingLeft: "".concat(row._X_LEVEL * indent, "px")
}
}, [showIcon && (rowChilds && rowChilds.length || hasLazyChilds) ? [h('div', {
"class": 'vxe-tree--btn-wrapper',
on: on
}, [h('i', {
"class": ['vxe-tree--node-btn', isLazyLoaded ? iconLoaded || GlobalConfig.icon.TABLE_TREE_LOADED : isAceived ? iconOpen || GlobalConfig.icon.TABLE_TREE_OPEN : iconClose || GlobalConfig.icon.TABLE_TREE_CLOSE]
})])] : null, h('div', {
"class": 'vxe-tree-cell'
}, cellVNodes)])];
},
_loadTreeData: function _loadTreeData(data) {
var _this4 = this;
var highlightCurrentRow = this.highlightCurrentRow;
var selectRow = this.getRadioRecord();
var currentRow;
if (highlightCurrentRow) {
currentRow = this.getCurrentRecord();
}
return this.$nextTick().then(function () {
return _this4.$refs.xTable.loadData(data);
}).then(function () {
if (selectRow) {
_this4.setRadioRow(selectRow);
}
if (highlightCurrentRow && currentRow) {
_this4.setCurrentRow(currentRow);
}
});
},
getData: function getData(rowIndex) {
var fullTreeData = this.fullTreeData;
return _xeUtils["default"].isUndefined(rowIndex) ? fullTreeData.slice(0) : fullTreeData[rowIndex];
},
loadData: function loadData(data) {
return this._loadTreeData(this.toVirtualTree(data));
},
reloadData: function reloadData(data) {
var _this5 = this;
return this.$nextTick().then(function () {
return _this5.$refs.xTable.reloadData(_this5.toVirtualTree(data));
}).then(function () {
return _this5.handleDefaultTreeExpand();
});
},
isTreeExpandByRow: function isTreeExpandByRow(row) {
return !!row._X_EXPAND;
},
setTreeExpansion: function setTreeExpansion(rows, expanded) {
return this.setTreeExpand(rows, expanded);
},
handleAsyncTreeExpandChilds: function handleAsyncTreeExpandChilds(row) {
var _this6 = this;
var treeLazyLoadeds = this.treeLazyLoadeds,
treeOpts = this.treeOpts,
checkboxOpts = this.checkboxOpts;
var loadMethod = treeOpts.loadMethod,
children = treeOpts.children;
var checkStrictly = checkboxOpts.checkStrictly;
return new Promise(function (resolve) {
if (loadMethod) {
treeLazyLoadeds.push(row);
loadMethod({
row: row
})["catch"](function () {
return [];
}).then(function (childs) {
row._X_LOADED = true;
_xeUtils["default"].remove(treeLazyLoadeds, function (item) {
return item === row;
});
if (!_xeUtils["default"].isArray(childs)) {
childs = [];
}
if (childs) {
row[children] = childs.map(function (item) {
item._X_LOADED = false;
item._X_EXPAND = false;
item._X_INSERT = false;
item._X_LEVEL = row._X_LEVEL + 1;
return item;
});
if (childs.length && !row._X_EXPAND) {
_this6.virtualExpand(row, true);
} // 如果当前节点已选中，则展开后子节点也被选中
if (!checkStrictly && _this6.isCheckedByCheckboxRow(row)) {
_this6.setCheckboxRow(childs, true);
}
}
resolve(_this6.$nextTick().then(function () {
return _this6.recalculate();
}));
});
} else {
resolve(null);
}
});
},
setTreeExpand: function setTreeExpand(rows, expanded) {
var _this7 = this;
var treeLazyLoadeds = this.treeLazyLoadeds,
treeOpts = this.treeOpts,
tableFullData = this.tableFullData,
treeNodeColumn = this.treeNodeColumn;
var lazy = treeOpts.lazy,
hasChild = treeOpts.hasChild,
accordion = treeOpts.accordion,
toggleMethod = treeOpts.toggleMethod;
var result = [];
if (rows) {
if (!_xeUtils["default"].isArray(rows)) {
rows = [rows];
}
var columnIndex = this.getColumnIndex(treeNodeColumn);
var $columnIndex = this.getVMColumnIndex(treeNodeColumn);
var validRows = toggleMethod ? rows.filter(function (row) {
return toggleMethod({
expanded: expanded,
column: treeNodeColumn,
row: row,
columnIndex: columnIndex,
$columnIndex: $columnIndex
});
}) : rows;
if (accordion) {
validRows = validRows.length ? [validRows[validRows.length - 1]] : []; // 同一级只能展开一个
var matchObj = _xeUtils["default"].findTree(tableFullData, function (item) {
return item === rows[0];
}, treeOpts);
if (matchObj) {
matchObj.items.forEach(function (row) {
row._X_EXPAND = false;
});
}
}
validRows.forEach(function (row) {
var isLoad = lazy && row[hasChild] && !row._X_LOADED && treeLazyLoadeds.indexOf(row) === -1; // 是否使用懒加载
if (expanded && isLoad) {
result.push(_this7.handleAsyncTreeExpandChilds(row));
} else {
if (hasChilds(_this7, row)) {
_this7.virtualExpand(row, !!expanded);
}
}
});
return Promise.all(result).then(function () {
_this7._loadTreeData(_this7.treeTableData);
return _this7.recalculate();
});
}
return this.$nextTick();
},
setAllTreeExpansion: function setAllTreeExpansion(expanded) {
return this.setAllTreeExpand(expanded);
},
setAllTreeExpand: function setAllTreeExpand(expanded) {
return this._loadTreeData(this.virtualAllExpand(expanded));
},
toggleTreeExpansion: function toggleTreeExpansion(row) {
return this.toggleTreeExpand(row);
},
triggerTreeExpandEvent: function triggerTreeExpandEvent(evnt, params) {
var treeOpts = this.treeOpts,
treeLazyLoadeds = this.treeLazyLoadeds;
var row = params.row,
column = params.column;
var lazy = treeOpts.lazy;
if (!lazy || treeLazyLoadeds.indexOf(row) === -1) {
var expanded = !this.isTreeExpandByRow(row);
this.setTreeExpand(row, expanded);
this.$emit('toggle-tree-expand', {
expanded: expanded,
column: column,
row: row,
$event: evnt
});
}
},
toggleTreeExpand: function toggleTreeExpand(row) {
return this._loadTreeData(this.virtualExpand(row, !row._X_EXPAND));
},
getTreeExpandRecords: function getTreeExpandRecords() {
var _this8 = this;
var fullTreeData = this.fullTreeData,
treeOpts = this.treeOpts;
var treeExpandRecords = [];
_xeUtils["default"].eachTree(fullTreeData, function (row) {
if (row._X_EXPAND && hasChilds(_this8, row)) {
treeExpandRecords.push(row);
}
}, treeOpts);
return treeExpandRecords;
},
clearTreeExpand: function clearTreeExpand() {
return this.setAllTreeExpand(false);
},
handleColumns: function handleColumns(columns) {
var $vxe = this.$vxe,
renderTreeIcon = this.renderTreeIcon,
checkboxOpts = this.checkboxOpts;
if (columns) {
if ((!checkboxOpts.checkField || !checkboxOpts.halfField) && columns.some(function (conf) {
return conf.type === 'checkbox';
})) {
console.error($vxe.t('vxe.error.reqProp', ['table.checkbox-config.checkField | table.checkbox-config.halfField']));
return [];
}
var treeNodeColumn = columns.find(function (conf) {
return conf.treeNode;
});
if (treeNodeColumn) {
var slots = treeNodeColumn.slots || {};
slots.icon = renderTreeIcon;
treeNodeColumn.slots = slots;
this.treeNodeColumn = treeNodeColumn;
}
return columns;
}
return [];
},
/**
* 获取表格数据集，包含新增、删除
* 不支持修改
*/
getRecordset: function getRecordset() {
return {
insertRecords: this.getInsertRecords(),
removeRecords: this.getRemoveRecords(),
updateRecords: []
};
},
isInsertByRow: function isInsertByRow(row) {
return !!row._X_INSERT;
},
getInsertRecords: function getInsertRecords() {
var treeOpts = this.treeOpts;
var insertRecords = [];
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
if (row._X_INSERT) {
insertRecords.push(row);
}
}, treeOpts);
return insertRecords;
},
insert: function insert(records) {
return this.insertAt(records, null);
},
/**
* 支持任意层级插入与删除
*/
insertAt: function insertAt(records, row) {
var _this9 = this;
var fullTreeData = this.fullTreeData,
treeTableData = this.treeTableData,
treeOpts = this.treeOpts;
if (!_xeUtils["default"].isArray(records)) {
records = [records];
}
var newRecords = records.map(function (record) {
return _this9.defineField(Object.assign({
_X_LOADED: false,
_X_EXPAND: false,
_X_INSERT: true,
_X_LEVEL: 0
}, record));
});
if (!row) {
fullTreeData.unshift.apply(fullTreeData, _toConsumableArray(newRecords));
treeTableData.unshift.apply(treeTableData, _toConsumableArray(newRecords));
} else {
if (row === -1) {
fullTreeData.push.apply(fullTreeData, _toConsumableArray(newRecords));
treeTableData.push.apply(treeTableData, _toConsumableArray(newRecords));
} else {
var matchObj = _xeUtils["default"].findTree(fullTreeData, function (item) {
return item === row;
}, treeOpts);
if (!matchObj || matchObj.index === -1) {
throw new Error(t('vxe.error.unableInsert'));
}
var items = matchObj.items,
index = matchObj.index,
nodes = matchObj.nodes;
var rowIndex = treeTableData.indexOf(row);
if (rowIndex > -1) {
treeTableData.splice.apply(treeTableData, [rowIndex, 0].concat(_toConsumableArray(newRecords)));
}
items.splice.apply(items, [index, 0].concat(_toConsumableArray(newRecords)));
newRecords.forEach(function (item) {
item._X_LEVEL = nodes.length - 1;
});
}
}
return this._loadTreeData(treeTableData).then(function () {
return {
row: newRecords.length ? newRecords[newRecords.length - 1] : null,
rows: newRecords
};
});
},
/**
* 获取已删除的数据
*/
getRemoveRecords: function getRemoveRecords() {
return this.removeList;
},
removeSelecteds: function removeSelecteds() {
return this.removeCheckboxRow();
},
/**
* 删除选中数据
*/
removeCheckboxRow: function removeCheckboxRow() {
var _this10 = this;
return this.remove(this.getCheckboxRecords()).then(function (params) {
_this10.clearSelection();
return params;
});
},
remove: function remove(rows) {
var _this11 = this;
var removeList = this.removeList,
fullTreeData = this.fullTreeData,
treeOpts = this.treeOpts;
var rest = [];
if (!rows) {
rows = fullTreeData;
} else if (!_xeUtils["default"].isArray(rows)) {
rows = [rows];
}
rows.forEach(function (row) {
var matchObj = _xeUtils["default"].findTree(fullTreeData, function (item) {
return item === row;
}, treeOpts);
if (matchObj) {
var item = matchObj.item,
items = matchObj.items,
index = matchObj.index,
parent = matchObj.parent;
if (!_this11.isInsertByRow(row)) {
removeList.push(row);
}
if (parent) {
var isExpand = _this11.isTreeExpandByRow(parent);
if (isExpand) {
_this11.handleCollapsing(parent);
}
items.splice(index, 1);
if (isExpand) {
_this11.handleExpanding(parent);
}
} else {
_this11.handleCollapsing(item);
items.splice(index, 1);
_this11.treeTableData.splice(_this11.treeTableData.indexOf(item), 1);
}
rest.push(item);
}
});
return this._loadTreeData(this.treeTableData).then(function () {
return {
row: rest.length ? rest[rest.length - 1] : null,
rows: rest
};
});
},
/**
* 处理默认展开树节点
*/
handleDefaultTreeExpand: function handleDefaultTreeExpand() {
var _this12 = this;
var treeConfig = this.treeConfig,
treeOpts = this.treeOpts,
tableFullData = this.tableFullData;
if (treeConfig) {
var children = treeOpts.children,
expandAll = treeOpts.expandAll,
expandRowKeys = treeOpts.expandRowKeys;
if (expandAll) {
this.setAllTreeExpand(true);
} else if (expandRowKeys && this.rowId) {
var rowkey = this.rowId;
expandRowKeys.forEach(function (rowid) {
var matchObj = _xeUtils["default"].findTree(tableFullData, function (item) {
return rowid === _xeUtils["default"].get(item, rowkey);
}, treeOpts);
var rowChildren = matchObj ? matchObj.item[children] : 0;
if (rowChildren && rowChildren.length) {
_this12.setTreeExpand(matchObj.item, true);
}
});
}
}
},
/**
* 定义树属性
*/
toVirtualTree: function toVirtualTree(treeData) {
var treeOpts = this.treeOpts;
var fullTreeRowMap = this.fullTreeRowMap;
fullTreeRowMap.clear();
_xeUtils["default"].eachTree(treeData, function (item, index, items, paths, parent, nodes) {
item._X_LOADED = false;
item._X_EXPAND = false;
item._X_INSERT = false;
item._X_LEVEL = nodes.length - 1;
fullTreeRowMap.set(item, {
item: item,
index: index,
items: items,
paths: paths,
parent: parent,
nodes: nodes
});
}, treeOpts);
this.fullTreeData = treeData.slice(0);
this.treeTableData = treeData.slice(0);
return treeData;
},
/**
* 展开/收起树节点
*/
virtualExpand: function virtualExpand(row, expanded) {
var treeOpts = this.treeOpts,
treeNodeColumn = this.treeNodeColumn;
var toggleMethod = treeOpts.toggleMethod;
var columnIndex = this.getColumnIndex(treeNodeColumn);
var $columnIndex = this.getVMColumnIndex(treeNodeColumn);
if (!toggleMethod || toggleMethod({
expanded: expanded,
row: row,
column: treeNodeColumn,
columnIndex: columnIndex,
$columnIndex: $columnIndex
})) {
if (row._X_EXPAND !== expanded) {
if (row._X_EXPAND) {
this.handleCollapsing(row);
} else {
this.handleExpanding(row);
}
}
}
return this.treeTableData;
},
// 展开节点
handleExpanding: function handleExpanding(row) {
if (hasChilds(this, row)) {
var treeTableData = this.treeTableData,
treeOpts = this.treeOpts;
var childRows = row[treeOpts.children];
var expandList = [];
var rowIndex = treeTableData.indexOf(row);
if (rowIndex === -1) {
throw new Error('Expanding error');
}
var expandMaps = new Map();
_xeUtils["default"].eachTree(childRows, function (item, index, obj, paths, parent, nodes) {
if (!parent || parent._X_EXPAND && expandMaps.has(parent)) {
expandMaps.set(item, 1);
expandList.push(item);
}
}, treeOpts);
row._X_EXPAND = true;
treeTableData.splice.apply(treeTableData, [rowIndex + 1, 0].concat(expandList));
}
return this.treeTableData;
},
// 收起节点
handleCollapsing: function handleCollapsing(row) {
if (hasChilds(this, row)) {
var treeTableData = this.treeTableData,
treeOpts = this.treeOpts;
var childRows = row[treeOpts.children];
var nodeChildList = [];
_xeUtils["default"].eachTree(childRows, function (item) {
nodeChildList.push(item);
}, treeOpts);
row._X_EXPAND = false;
this.treeTableData = treeTableData.filter(function (item) {
return nodeChildList.indexOf(item) === -1;
});
}
return this.treeTableData;
},
/**
* 展开/收起所有树节点
*/
virtualAllExpand: function virtualAllExpand(expanded) {
var treeOpts = this.treeOpts;
if (expanded) {
var tableList = [];
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
row._X_EXPAND = expanded;
tableList.push(row);
}, treeOpts);
this.treeTableData = tableList;
} else {
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
row._X_EXPAND = expanded;
}, treeOpts);
this.treeTableData = this.fullTreeData.slice(0);
}
return this.treeTableData;
},
clearCheckboxRow: function clearCheckboxRow() {
return this.setAllCheckboxRow(false);
},
toggleAllCheckboxRow: function toggleAllCheckboxRow() {
var checkboxOpts = this.checkboxOpts;
var checkField = checkboxOpts.checkField,
checkStrictly = checkboxOpts.checkStrictly;
if (checkField && !checkStrictly) {
return this.setAllCheckboxRow(!this.fullTreeData.every(function (row) {
return row[checkField];
}));
}
return this.$nextTick();
},
setAllCheckboxRow: function setAllCheckboxRow(checked) {
var checkboxOpts = this.checkboxOpts,
treeOpts = this.treeOpts;
var checkField = checkboxOpts.checkField,
halfField = checkboxOpts.halfField,
checkStrictly = checkboxOpts.checkStrictly;
if (checkField && !checkStrictly) {
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
row[checkField] = checked;
if (halfField) {
row[halfField] = false;
}
}, treeOpts);
this.$refs.xTable.checkSelectionStatus();
}
return this.$nextTick();
},
checkboxAllEvent: function checkboxAllEvent(params) {
var checked = params.checked;
this.setAllCheckboxRow(checked);
this.$emit('checkbox-all', params);
},
checkboxChangeEvent: function checkboxChangeEvent(params) {
var row = params.row,
checked = params.checked;
this.setCheckboxRow(row, checked);
this.$emit('checkbox-change', params);
},
toggleCheckboxRow: function toggleCheckboxRow(rows) {
var _this13 = this;
var checkboxOpts = this.checkboxOpts;
var checkField = checkboxOpts.checkField;
if (checkField) {
rows.forEach(function (row) {
_this13.setCheckboxRow(row, !row[checkField]);
});
}
},
setCheckboxRow: function setCheckboxRow(rows, checked) {
var _this14 = this;
var checkboxOpts = this.checkboxOpts,
treeOpts = this.treeOpts;
var checkField = checkboxOpts.checkField,
halfField = checkboxOpts.halfField,
checkStrictly = checkboxOpts.checkStrictly;
if (!_xeUtils["default"].isArray(rows)) {
rows = [rows];
}
if (checkField) {
if (checkStrictly) {
rows.forEach(function (row) {
row[checkField] = checked;
if (halfField) {
row[halfField] = false;
}
});
} else {
_xeUtils["default"].eachTree(rows, function (row) {
row[checkField] = checked;
if (halfField) {
row[halfField] = false;
}
}, treeOpts);
rows.forEach(function (row) {
_this14.checkParentNodeSelection(row);
});
}
}
return this.$nextTick();
},
checkParentNodeSelection: function checkParentNodeSelection(row) {
var checkboxOpts = this.checkboxOpts,
treeOpts = this.treeOpts;
var children = treeOpts.children;
var checkField = checkboxOpts.checkField,
halfField = checkboxOpts.halfField,
checkStrictly = checkboxOpts.checkStrictly;
var matchObj = _xeUtils["default"].findTree(this.fullTreeData, function (item) {
return item === row;
}, treeOpts);
if (matchObj && checkField && !checkStrictly) {
var parentRow = matchObj.parent;
if (parentRow) {
var isAll = parentRow[children].every(function (item) {
return item[checkField];
});
if (halfField && !isAll) {
parentRow[halfField] = parentRow[children].some(function (item) {
return item[checkField] || item[halfField];
});
}
parentRow[checkField] = isAll;
this.checkParentNodeSelection(parentRow);
} else {
this.$refs.xTable.checkSelectionStatus();
}
}
},
getCheckboxRecords: function getCheckboxRecords() {
var checkboxOpts = this.checkboxOpts,
treeOpts = this.treeOpts;
var checkField = checkboxOpts.checkField;
if (checkField) {
var records = [];
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
if (row[checkField]) {
records.push(row);
}
}, treeOpts);
return records;
}
return this.$refs.xTable.getCheckboxRecords();
},
getCheckboxIndeterminateRecords: function getCheckboxIndeterminateRecords() {
var checkboxOpts = this.checkboxOpts,
treeOpts = this.treeOpts;
var halfField = checkboxOpts.halfField;
if (halfField) {
var records = [];
_xeUtils["default"].eachTree(this.fullTreeData, function (row) {
if (row[halfField]) {
records.push(row);
}
}, treeOpts);
return records;
}
return this.$refs.xTable.getCheckboxIndeterminateRecords();
}
}
};
vxetable.Vue.component(options.name, options);
}
/**
* 基于 vxe-table 表格的增强插件，实现简单的虚拟树表格
*/
var VXETablePluginVirtualTree = {
install: function install(vxetable) {
registerComponent(vxetable);
}
};
_exports.VXETablePluginVirtualTree = VXETablePluginVirtualTree;
if (typeof window !== 'undefined' && window.VXETable && window.VXETable.use) {
window.VXETable.use(VXETablePluginVirtualTree);
}
var _default = VXETablePluginVirtualTree;
_exports["default"] = _default;
});