| import { Menu, Icon, Input } from 'ant-design-vue' |
| |
| const { Item, ItemGroup, SubMenu } = Menu |
| const { Search } = Input |
| |
| export default { |
| name: 'Tree', |
| props: { |
| dataSource: { |
| type: Array, |
| required: true |
| }, |
| openKeys: { |
| type: Array, |
| default: () => [] |
| }, |
| search: { |
| type: Boolean, |
| default: false |
| } |
| }, |
| created () { |
| this.localOpenKeys = this.openKeys.slice(0) |
| }, |
| data () { |
| return { |
| localOpenKeys: [] |
| } |
| }, |
| methods: { |
| handlePlus (item) { |
| this.$emit('add', item) |
| }, |
| handleTitleClick (...args) { |
| this.$emit('titleClick', { args }) |
| }, |
| |
| renderSearch () { |
| return ( |
| <Search |
| placeholder="input search text" |
| style="width: 100%; margin-bottom: 1rem" |
| /> |
| ) |
| }, |
| renderIcon (icon) { |
| return icon && (<Icon type={icon} />) || null |
| }, |
| renderMenuItem (item) { |
| return ( |
| <Item key={item.key}> |
| { this.renderIcon(item.icon) } |
| { item.title } |
| <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a> |
| </Item> |
| ) |
| }, |
| renderItem (item) { |
| return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key) |
| }, |
| renderItemGroup (item) { |
| const childrenItems = item.children.map(o => { |
| return this.renderItem(o, o.key) |
| }) |
| |
| return ( |
| <ItemGroup key={item.key}> |
| <template slot="title"> |
| <span>{ item.title }</span> |
| <a-dropdown> |
| <a class="btn"><a-icon type="ellipsis" /></a> |
| <a-menu slot="overlay"> |
| <a-menu-item key="1">新增</a-menu-item> |
| <a-menu-item key="2">合并</a-menu-item> |
| <a-menu-item key="3">移除</a-menu-item> |
| </a-menu> |
| </a-dropdown> |
| </template> |
| { childrenItems } |
| </ItemGroup> |
| ) |
| }, |
| renderSubItem (item, key) { |
| const childrenItems = item.children && item.children.map(o => { |
| return this.renderItem(o, o.key) |
| }) |
| |
| const title = ( |
| <span slot="title"> |
| { this.renderIcon(item.icon) } |
| <span>{ item.title }</span> |
| </span> |
| ) |
| |
| if (item.group) { |
| return this.renderItemGroup(item) |
| } |
| // titleClick={this.handleTitleClick(item)} |
| return ( |
| <SubMenu key={key}> |
| { title } |
| { childrenItems } |
| </SubMenu> |
| ) |
| } |
| }, |
| render () { |
| const { dataSource, search } = this.$props |
| |
| // this.localOpenKeys = openKeys.slice(0) |
| const list = dataSource.map(item => { |
| return this.renderItem(item) |
| }) |
| |
| return ( |
| <div class="tree-wrapper"> |
| { search ? this.renderSearch() : null } |
| <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}> |
| { list } |
| </Menu> |
| </div> |
| ) |
| } |
| } |