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

/* eslint no-console:0 */
/* eslint no-alert:0 */
import PropTypes from '../../_util/vue-types'
import Tree from '../index'
import '../assets/index.less'
import './basic.less'

const treeData = [
  { key: '0-0', title: 'parent 1', children:
    [
      { key: '0-0-0', title: 'parent 1-1', children:
        [
          { key: '0-0-0-0', title: 'parent 1-1-0' },
        ],
      },
      { key: '0-0-1', title: 'parent 1-2', children:
          [
            { key: '0-0-1-0', title: 'parent 1-2-0', disableCheckbox: true },
            { key: '0-0-1-1', title: 'parent 1-2-1' },
          ],
      },
    ],
  },
]

export default {
  props: {
    keys: PropTypes.array.def(['0-0-0-0']),
  },
  data () {
    const keys = this.keys
    return {
      defaultExpandedKeys: keys,
      defaultSelectedKeys: keys,
      defaultCheckedKeys: keys,
    }
  },
  methods: {
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys, arguments)
    },
    onSelect (selectedKeys, info) {
      console.log('selected', selectedKeys, info)
      this.selKey = info.node.$options.propsData.eventKey
    },
    onCheck (checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    onEdit  () {
      setTimeout(() => {
        console.log('current key: ', this.selKey)
      }, 0)
    },
    onDel  (e) {
      if (!window.confirm('sure to delete?')) {
        return
      }
      e.stopPropagation()
    },
    toggleChildren () {
      this.showMore = !this.showMore
    },
  },

  render () {
    const customLabel = ( // eslint-disable-line
      <span class='cus-label'>
        <span>operations: </span>
        <span style={{ color: 'blue' }} onClick={this.onEdit}>Edit</span>&nbsp;
        <label onClick={(e) => e.stopPropagation()}>
          <input type='checkbox' /> checked
        </label>
        &nbsp;
        <span style={{ color: '#EB0000' }} onClick={this.onDel}>Delete</span>
      </span>
    )
    return (<div style={{ margin: '0 20px' }}>
      <h2>simple</h2>
      {/* <Tree
        class='myCls' showLine checkable defaultExpandAll
        defaultExpandedKeys={this.defaultExpandedKeys}
        onExpand={this.onExpand}
        defaultSelectedKeys={this.defaultSelectedKeys}
        defaultCheckedKeys={this.defaultCheckedKeys}
        onSelect={this.onSelect} onCheck={this.onCheck}
      >
        <TreeNode title='parent 1' key='0-0'>
          <TreeNode title={customLabel} key='0-0-0'>
            <TreeNode title='leaf' key='0-0-0-0' style={{ background: 'rgba(255, 0, 0, 0.1)' }} />
            <TreeNode title='leaf' key='0-0-0-1' />
          </TreeNode>
          <TreeNode title='parent 1-1' key='0-0-1'>
            <TreeNode title='parent 1-1-0' key='0-0-1-0' disableCheckbox />
            <TreeNode title='parent 1-1-1' key='0-0-1-1' />
          </TreeNode>
          <TreeNode title='parent 1-2' key='0-0-2' disabled>
            <TreeNode title='parent 1-2-0' key='0-0-2-0' disabled />
            <TreeNode title='parent 1-2-1' key='0-0-2-1' />
          </TreeNode>
        </TreeNode>
      </Tree> */}

      <h2>Check on Click TreeNode</h2>
      <Tree
        class='myCls'
        showLine
        checkable
        selectable={ false }
        defaultExpandAll
        onExpand={this.onExpand}
        defaultSelectedKeys={this.defaultSelectedKeys}
        defaultCheckedKeys={this.defaultCheckedKeys}
        onSelect={this.onSelect}
        onCheck={this.onCheck}
        treeData={treeData}
      />
    </div>)
  },
}