Unverified Commit c4e48688 by Sendya

chore: table a-swtich checked,record

parent de613635
import Menu from 'ant-design-vue/es/menu' import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon' import Icon from 'ant-design-vue/es/icon'
const { Item, SubMenu } = Menu const { Item, SubMenu } = Menu
export default { export default {
name: 'SMenu', name: 'SMenu',
props: { props: {
menu: { menu: {
type: Array, type: Array,
required: true required: true
}, },
theme: { theme: {
type: String, type: String,
required: false, required: false,
default: 'dark' default: 'dark'
}, },
mode: { mode: {
type: String, type: String,
required: false, required: false,
default: 'inline' default: 'inline'
}, },
collapsed: { collapsed: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
} }
}, },
data () { data () {
return { return {
openKeys: [], openKeys: [],
selectedKeys: [], selectedKeys: [],
cachedOpenKeys: [] cachedOpenKeys: []
} }
}, },
computed: { computed: {
rootSubmenuKeys: vm => { rootSubmenuKeys: vm => {
const keys = [] const keys = []
vm.menu.forEach(item => keys.push(item.path)) vm.menu.forEach(item => keys.push(item.path))
return keys return keys
} }
}, },
created () { created () {
this.updateMenu() this.updateMenu()
}, },
watch: { watch: {
collapsed (val) { collapsed (val) {
if (val) { if (val) {
this.cachedOpenKeys = this.openKeys.concat() this.cachedOpenKeys = this.openKeys.concat()
this.openKeys = [] this.openKeys = []
} else { } else {
this.openKeys = this.cachedOpenKeys this.openKeys = this.cachedOpenKeys
} }
}, },
$route: function () { $route: function () {
this.updateMenu() this.updateMenu()
} }
}, },
methods: { methods: {
renderIcon: function (h, icon) { renderIcon: function (h, icon) {
if (icon === 'none' || icon === undefined) { if (icon === 'none' || icon === undefined) {
return null return null
} }
const props = {} const props = {}
typeof (icon) === 'object' ? props.component = icon : props.type = icon typeof (icon) === 'object' ? props.component = icon : props.type = icon
return h(Icon, { props: { ...props } }) return h(Icon, { props: { ...props } })
}, },
renderMenuItem: function (h, menu, pIndex, index) { renderMenuItem: function (h, menu, pIndex, index) {
const target = menu.meta.target || null const target = menu.meta.target || null
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [ return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [ h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
this.renderIcon(h, menu.meta.icon), this.renderIcon(h, menu.meta.icon),
h('span', [menu.meta.title]) h('span', [menu.meta.title])
]) ])
]) ])
}, },
renderSubMenu: function (h, menu, pIndex, index) { renderSubMenu: function (h, menu, pIndex, index) {
const this2_ = this const this2_ = this
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])] const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
const itemArr = [] const itemArr = []
const pIndex_ = pIndex + '_' + index const pIndex_ = pIndex + '_' + index
console.log('menu', menu) if (!menu.hideChildrenInMenu) {
if (!menu.hideChildrenInMenu) { menu.children.forEach(function (item, i) {
menu.children.forEach(function (item, i) { itemArr.push(this2_.renderItem(h, item, pIndex_, i))
itemArr.push(this2_.renderItem(h, item, pIndex_, i)) })
}) }
} return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr)) },
}, renderItem: function (h, menu, pIndex, index) {
renderItem: function (h, menu, pIndex, index) { if (!menu.hidden) {
if (!menu.hidden) { return menu.children && !menu.hideChildrenInMenu
return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(h, menu, pIndex, index)
? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
: this.renderMenuItem(h, menu, pIndex, index) }
} },
}, renderMenu: function (h, menuTree) {
renderMenu: function (h, menuTree) { const this2_ = this
const this2_ = this const menuArr = []
const menuArr = [] menuTree.forEach(function (menu, i) {
menuTree.forEach(function (menu, i) { if (!menu.hidden) {
if (!menu.hidden) { menuArr.push(this2_.renderItem(h, menu, '0', i))
menuArr.push(this2_.renderItem(h, menu, '0', i)) }
} })
}) return menuArr
return menuArr },
}, onOpenChange (openKeys) {
onOpenChange (openKeys) { const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)) if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
if (!this.rootSubmenuKeys.includes(latestOpenKey)) { this.openKeys = openKeys
this.openKeys = openKeys } else {
} else { this.openKeys = latestOpenKey ? [latestOpenKey] : []
this.openKeys = latestOpenKey ? [latestOpenKey] : [] }
} },
}, updateMenu () {
updateMenu () { const routes = this.$route.matched.concat()
const routes = this.$route.matched.concat()
if (routes.length >= 4 && this.$route.meta.hidden) {
if (routes.length >= 4 && this.$route.meta.hidden) { routes.pop()
routes.pop() this.selectedKeys = [routes[2].path]
this.selectedKeys = [routes[2].path] } else {
} else { this.selectedKeys = [routes.pop().path]
this.selectedKeys = [routes.pop().path] }
}
const openKeys = []
const openKeys = [] if (this.mode === 'inline') {
if (this.mode === 'inline') { routes.forEach(item => {
routes.forEach(item => { openKeys.push(item.path)
openKeys.push(item.path) })
}) }
}
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) }
} },
}, render (h) {
render (h) { return h(
return h( Menu,
Menu, {
{ props: {
props: { theme: this.$props.theme,
theme: this.$props.theme, mode: this.$props.mode,
mode: this.$props.mode, openKeys: this.openKeys,
openKeys: this.openKeys, selectedKeys: this.selectedKeys
selectedKeys: this.selectedKeys },
}, on: {
on: { openChange: this.onOpenChange,
openChange: this.onOpenChange, select: obj => {
select: obj => { this.selectedKeys = obj.selectedKeys
this.selectedKeys = obj.selectedKeys this.$emit('select', obj)
this.$emit('select', obj) }
} }
} },
}, this.renderMenu(h, this.menu)
this.renderMenu(h, this.menu) )
) }
} }
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment