vue addsubmenu是vue-element-admin框架中的一個組件,用于快速添加二級菜單。
使用該組件非常簡單,只需要按以下方式引入:
import AddSubMenu from '@/components/AddSubMenu'
接著,在需要添加二級菜單的地方使用以下代碼:
<AddSubMenu @confirm='addSubMenu'> <template slot="parent"> <el-form-item label="父級菜單"> <el-select v-model="parent" placeholder="請選擇"> <el-option v-for="item in parentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> </template> <template slot="child"> <el-form-item label="子菜單"> <el-input v-model="child" placeholder="請輸入子菜單名稱"></el-input> </el-form-item> </template> </AddSubMenu>
其中,@confirm為確認按鈕點擊事件,在該事件中處理添加二級菜單的邏輯。
在父級菜單的下拉選項中,可以使用以下方法獲取:
getParentOptions() { return this.$store.state.menu.items.map(item =>{ return { label: item.name, value: item.path } }) },
添加二級菜單的邏輯可以使用以下方法:
addSubMenu() { if (!this.parent) { this.$message.error('請選擇父級菜單') return } if (!this.child) { this.$message.error('請輸入子菜單名稱') return } let parentItem = this.$store.state.menu.items.find(item =>item.path === this.parent) if (!parentItem) { this.$message.error('父級菜單不存在') return } let childItem = { path: parentItem.path + '/' + this.child, name: parentItem.name + '-' + this.child, meta: { title: this.child } } parentItem.children.push(childItem) this.$store.commit('menu/saveMenu') this.$message.success('添加成功') }
以上就是vue addsubmenu的使用方法和添加二級菜單的邏輯。
上一篇MySQL出勤
下一篇vue activiti