| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
- import { watchEffect, ref, defineComponent, computed } from 'vue';
- import classNames from '../_util/classNames';
- import VcTree from '../vc-tree';
- import PropTypes from '../_util/vue-types';
- import { filterEmpty } from '../_util/props-util';
- import initDefaultProps from '../_util/props-util/initDefaultProps';
- import { treeProps as vcTreeProps } from '../vc-tree/props';
- import useConfigInject from '../config-provider/hooks/useConfigInject';
- import renderSwitcherIcon from './utils/iconUtil';
- import dropIndicatorRender from './utils/dropIndicator';
- import devWarning from '../vc-util/devWarning';
- import { warning } from '../vc-util/warning';
- import omit from '../_util/omit';
- import { booleanType, someType, arrayType, functionType, objectType } from '../_util/type';
- // CSSINJS
- import useStyle from './style';
- export const treeProps = () => {
- const baseTreeProps = vcTreeProps();
- return _extends(_extends({}, baseTreeProps), {
- showLine: someType([Boolean, Object]),
- /** 是否支持多选 */
- multiple: booleanType(),
- /** 是否自动展开父节点 */
- autoExpandParent: booleanType(),
- /** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
- checkStrictly: booleanType(),
- /** 是否支持选中 */
- checkable: booleanType(),
- /** 是否禁用树 */
- disabled: booleanType(),
- /** 默认展开所有树节点 */
- defaultExpandAll: booleanType(),
- /** 默认展开对应树节点 */
- defaultExpandParent: booleanType(),
- /** 默认展开指定的树节点 */
- defaultExpandedKeys: arrayType(),
- /** (受控)展开指定的树节点 */
- expandedKeys: arrayType(),
- /** (受控)选中复选框的树节点 */
- checkedKeys: someType([Array, Object]),
- /** 默认选中复选框的树节点 */
- defaultCheckedKeys: arrayType(),
- /** (受控)设置选中的树节点 */
- selectedKeys: arrayType(),
- /** 默认选中的树节点 */
- defaultSelectedKeys: arrayType(),
- selectable: booleanType(),
- loadedKeys: arrayType(),
- draggable: booleanType(),
- showIcon: booleanType(),
- icon: functionType(),
- switcherIcon: PropTypes.any,
- prefixCls: String,
- /**
- * @default{title,key,children}
- * deprecated, please use `fieldNames` instead
- * 替换treeNode中 title,key,children字段为treeData中对应的字段
- */
- replaceFields: objectType(),
- blockNode: booleanType(),
- openAnimation: PropTypes.any,
- onDoubleclick: baseTreeProps.onDblclick,
- 'onUpdate:selectedKeys': functionType(),
- 'onUpdate:checkedKeys': functionType(),
- 'onUpdate:expandedKeys': functionType()
- });
- };
- export default defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ATree',
- inheritAttrs: false,
- props: initDefaultProps(treeProps(), {
- checkable: false,
- selectable: true,
- showIcon: false,
- blockNode: false
- }),
- slots: Object,
- setup(props, _ref) {
- let {
- attrs,
- expose,
- emit,
- slots
- } = _ref;
- warning(!(props.treeData === undefined && slots.default), '`children` of Tree is deprecated. Please use `treeData` instead.');
- const {
- prefixCls,
- direction,
- virtual
- } = useConfigInject('tree', props);
- // style
- const [wrapSSR, hashId] = useStyle(prefixCls);
- const treeRef = ref();
- const scrollTo = scroll => {
- var _a;
- (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(scroll);
- };
- expose({
- treeRef,
- onNodeExpand: function () {
- var _a;
- (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.onNodeExpand(...arguments);
- },
- scrollTo,
- selectedKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.selectedKeys;
- }),
- checkedKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.checkedKeys;
- }),
- halfCheckedKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.halfCheckedKeys;
- }),
- loadedKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.loadedKeys;
- }),
- loadingKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.loadingKeys;
- }),
- expandedKeys: computed(() => {
- var _a;
- return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.expandedKeys;
- })
- });
- watchEffect(() => {
- devWarning(props.replaceFields === undefined, 'Tree', '`replaceFields` is deprecated, please use fieldNames instead');
- });
- const handleCheck = (checkedObjOrKeys, eventObj) => {
- emit('update:checkedKeys', checkedObjOrKeys);
- emit('check', checkedObjOrKeys, eventObj);
- };
- const handleExpand = (expandedKeys, eventObj) => {
- emit('update:expandedKeys', expandedKeys);
- emit('expand', expandedKeys, eventObj);
- };
- const handleSelect = (selectedKeys, eventObj) => {
- emit('update:selectedKeys', selectedKeys);
- emit('select', selectedKeys, eventObj);
- };
- return () => {
- const {
- showIcon,
- showLine,
- switcherIcon = slots.switcherIcon,
- icon = slots.icon,
- blockNode,
- checkable,
- selectable,
- fieldNames = props.replaceFields,
- motion = props.openAnimation,
- itemHeight = 28,
- onDoubleclick,
- onDblclick
- } = props;
- const newProps = _extends(_extends(_extends({}, attrs), omit(props, ['onUpdate:checkedKeys', 'onUpdate:expandedKeys', 'onUpdate:selectedKeys', 'onDoubleclick'])), {
- showLine: Boolean(showLine),
- dropIndicatorRender,
- fieldNames,
- icon,
- itemHeight
- });
- const children = slots.default ? filterEmpty(slots.default()) : undefined;
- return wrapSSR(_createVNode(VcTree, _objectSpread(_objectSpread({}, newProps), {}, {
- "virtual": virtual.value,
- "motion": motion,
- "ref": treeRef,
- "prefixCls": prefixCls.value,
- "class": classNames({
- [`${prefixCls.value}-icon-hide`]: !showIcon,
- [`${prefixCls.value}-block-node`]: blockNode,
- [`${prefixCls.value}-unselectable`]: !selectable,
- [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
- }, attrs.class, hashId.value),
- "direction": direction.value,
- "checkable": checkable,
- "selectable": selectable,
- "switcherIcon": nodeProps => renderSwitcherIcon(prefixCls.value, switcherIcon, nodeProps, slots.leafIcon, showLine),
- "onCheck": handleCheck,
- "onExpand": handleExpand,
- "onSelect": handleSelect,
- "onDblclick": onDblclick || onDoubleclick,
- "children": children
- }), _extends(_extends({}, slots), {
- checkable: () => _createVNode("span", {
- "class": `${prefixCls.value}-checkbox-inner`
- }, null)
- })));
- };
- }
- });
|