ant-design-vue/components/vc-tree-select/demo/controlled.jsx

69 lines
2.1 KiB
Vue
Raw Normal View History

/* eslint react/no-multi-comp:0, no-console:0, no-alert: 0 */
import BaseMixin from '../../_util/BaseMixin'
import '../assets/index.less'
import '../../vc-dialog/assets/index.less'
import TreeSelect, { TreeNode } from '../src/index'
import './demo.less'
export default {
mixins: [BaseMixin],
data: () => ({
treeExpandedKeys: [],
}),
methods: {
onTreeExpand (treeExpandedKeys) {
this.setState({
treeExpandedKeys,
})
},
setTreeExpandedKeys () {
this.setState({
treeExpandedKeys: ['000', '0-1-0'],
})
},
},
render () {
const { treeExpandedKeys } = this
return (
<div>
<h2>Conrolled treeExpandedKeys</h2>
<TreeSelect
style={{ width: '200px' }}
dropdownStyle={{ maxHeight: '200px', overflow: 'auto' }}
treeExpandedKeys={treeExpandedKeys}
onTreeExpand={this.onTreeExpand}
__propsSymbol__={Symbol()}
>
<TreeNode value='' title='parent 1' key='000'>
<TreeNode value='parent 1-0' title='parent 1-0' key='0-1-0'>
<TreeNode value='leaf1' title='my leaf' key='random' />
<TreeNode value='leaf2' title='your leaf' key='random1' disabled />
</TreeNode>
<TreeNode value='parent 1-1' title='parent 1-1' key='0-1-1'>
<TreeNode value='sss'
title={<span style={{ color: 'red' }}>sss</span>} key='random3'
/>
<TreeNode value='same value1' title='same txtle' key='0-1-1-1'>
<TreeNode value='same value10' title='same titlexd' key='0-1-1-1-0' style={{ color: 'red', background: 'green' }} />
</TreeNode>
</TreeNode>
</TreeNode>
<TreeNode value='same value2' title='same title' key='0-2'>
<TreeNode value='2same value' title='2same title' key='0-2-0' />
</TreeNode>
<TreeNode value='same value3' title='same title' key='0-3' />
</TreeSelect>
<button onClick={this.setTreeExpandedKeys}>
Set treeExpandedKeys
</button>
</div>
)
},
}