ant-design-vue/components/vc-tree/demo/basic-controlled.vue

<script>
/* eslint no-console:0 */
import Tree, { TreeNode } from '../index';
import '../assets/index.less';
import { gData, getRadioSelectKeys } from './util';
import '../../vc-dialog/assets/index.less';
import Modal from '../../vc-dialog';
import BaseMixin from '../../_util/BaseMixin';

export default {
  mixins: [BaseMixin],
  data() {
    return {
      // expandedKeys: getFilterExpandedKeys(gData, ['0-0-0-key']),
      expandedKeys: ['0-0-0-key'],
      autoExpandParent: true,
      // checkedKeys: ['0-0-0-0-key', '0-0-1-0-key', '0-1-0-0-key'],
      checkedKeys: ['0-0-0-key'],
      checkStrictlyKeys: { checked: ['0-0-1-key'], halfChecked: [] },
      selectedKeys: [],
      treeData: [],
      visible: false,
      multiple: true,
    };
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', arguments);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded chilren keys.
      this.setState({
        expandedKeys,
        autoExpandParent: false,
      });
    },
    onCheck(checkedKeys) {
      this.setState({
        checkedKeys,
      });
    },
    onCheckStrictly(checkedKeys /* extra*/) {
      console.log(arguments);
      // const { checkedNodesPositions } = extra;
      // const pps = filterParentPosition(checkedNodesPositions.map(i => i.pos));
      // console.log(checkedNodesPositions.filter(i => pps.indexOf(i.pos) > -1).map(i => i.node.key));
      const cks = {
        checked: checkedKeys.checked || checkedKeys,
        halfChecked: [`0-0-${parseInt(Math.random() * 3, 10)}-key`],
      };
      this.setState({
        // checkedKeys,
        checkStrictlyKeys: cks,
        // checkStrictlyKeys: checkedKeys,
      });
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', selectedKeys, info);
      this.setState({
        selectedKeys,
      });
    },
    onRbSelect(selectedKeys, info) {
      let _selectedKeys = selectedKeys;
      if (info.selected) {
        _selectedKeys = getRadioSelectKeys(gData, selectedKeys, info.node.eventKey);
      }
      this.setState({
        selectedKeys: _selectedKeys,
      });
    },
    onClose() {
      this.setState({
        visible: false,
      });
    },
    handleOk() {
      this.setState({
        visible: false,
      });
    },
    showModal() {
      this.setState({
        expandedKeys: ['0-0-0-key', '0-0-1-key'],
        checkedKeys: ['0-0-0-key'],
        visible: true,
      });
      // simulate Ajax
      setTimeout(() => {
        this.setState({
          treeData: [...gData],
        });
      }, 2000);
    },
    triggerChecked() {
      this.setState({
        checkedKeys: [`0-0-${parseInt(Math.random() * 3, 10)}-key`],
      });
    },
  },

  render() {
    const loop = data => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode key={item.key} title={item.title} disableCheckbox={item.key === '0-0-0-key'}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.key} title={item.title} />;
      });
    };
    // console.log(getRadioSelectKeys(gData, this.selectedKeys));
    return (
      <div style={{ padding: '0 20px' }}>
        <h2>dialog</h2>
        <button class="btn btn-primary" onClick={this.showModal}>
          show dialog
        </button>
        <Modal title="TestDemo" visible={this.visible} onOk={this.handleOk} onClose={this.onClose}>
          {this.treeData.length ? (
            <Tree
              checkable
              class="dialog-tree"
              onExpand={this.onExpand}
              expandedKeys={this.expandedKeys}
              autoExpandParent={this.autoExpandParent}
              onCheck={this.onCheck}
              checkedKeys={this.checkedKeys}
            >
              {loop(this.treeData)}
            </Tree>
          ) : (
            'loading...'
          )}
        </Modal>

        <h2>controlled</h2>
        <Tree
          checkable
          onExpand={this.onExpand}
          expandedKeys={this.expandedKeys}
          autoExpandParent={this.autoExpandParent}
          onCheck={this.onCheck}
          checkedKeys={this.checkedKeys}
          onSelect={this.onSelect}
          selectedKeys={this.selectedKeys}
        >
          {loop(gData)}
        </Tree>
        <button onClick={this.triggerChecked}>trigger checked</button>

        <h2>checkStrictly</h2>
        <Tree
          checkable
          multiple={this.multiple}
          defaultExpandAll
          onExpand={this.onExpand}
          expandedKeys={this.expandedKeys}
          onCheck={this.onCheckStrictly}
          checkedKeys={this.checkStrictlyKeys}
          checkStrictly
        >
          {loop(gData)}
        </Tree>

        <h2>radio's behavior select (in the same level)</h2>
        <Tree
          multiple
          defaultExpandAll
          onSelect={this.onRbSelect}
          selectedKeys={getRadioSelectKeys(gData, this.selectedKeys)}
        >
          {loop(gData)}
        </Tree>
      </div>
    );
  },
};
</script>