Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "how to write the Vue menu function code", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to write the code for Vue to achieve menu functions.

Menu function realizes menu interface encapsulation

Menu management is an operation of adding, deleting, changing and checking the structure of the menu tree.

Provide a menu query interface to query the whole menu tree structure.

Http/modules/menu.js adds findMenuTree interface.

Import axios from'.. / axios'/* * menu management module * / / Save export const save = (data) = > {return axios ({url:'/ menu/save', method: 'post', data})} / / Delete export const batchDelete = (data) = > {url:' / menu/delete' / / find the navigation menu tree export const findNavTree = (params) = > {url:'/ menu/findNavTree', method: 'get', paramsexport const findMenuTree = () = > {url:' / menu/findMenuTree', method: 'get' menu management interface

The menu management interface uses the packaged table tree component to display the menu structure and provides the function of adding, deleting, modifying and querying.

Menu.vue

Directory menu button {{type}} Unconfirm import KtButton from "@ / views/Core/KtButton" import TableTreeColumn from'@ / views/Core/TableTreeColumn'import PopupTreeInput from "@ / components/PopupTreeInput" import FaIconTooltip from "@ / components/FaIconTooltip" export default {components: {PopupTreeInput KtButton, TableTreeColumn, FaIconTooltip}, data () {return {size: 'small', loading: false, filters: {name:'}, tableTreeDdata: [], dialogVisible: false, menuTypeList: ['contents', 'menu', 'button'] DataForm: {id: 0, type: 1, name:', parentId: 0, parentName:', url:', perms:', orderNum: 0, icon:', iconList: []}, dataRule: {name: [{required: true Message: 'menu name cannot be empty', trigger: 'blur'}], parentName: [{required: true, message:' superior menu cannot be empty', trigger: 'change'}]}, popupTreeData: [], popupTreeProps: {label:' name' Children: 'children'} Methods: {/ / get data findTreeData: function () {this.loading = true this.$api.menu.findMenuTree () .then ((res) = > {this.tableTreeDdata = res.data this.popupTreeData = this.getParentMenuTree (res.data) this.loading = false})} / / get the superior menu tree getParentMenuTree: function (tableTreeDdata) {let parent = {parentId:-1, name: 'root node', children: tableTreeDdata} return [parent]}, / / display the new interface handleAdd: function () {this.dialogVisible = true this.dataForm = {id: 0 Type: 1, typeList: ['contents', 'menu', 'button'], name:', parentId: 0, parentName:', url:', perms:', orderNum: 0, icon:', iconList: []}} / / display the editing interface handleEdit: function (row) {this.dialogVisible = true Object.assign (this.dataForm, row) }, / / delete handleDelete (row) {this.$confirm ('sure you want to delete the selected record?' , 'prompt', {type: 'warning'}). Then () = > {let params = this.getDeleteIds ([], row) this.$api.menu.batchDelete (params) .then (res = > {this.findTreeData () this.$message ({message:' deleted successfully', type: 'success'}))} / / get the deleted id list with submenus getDeleteIds (ids, row) {ids.push ({id:row.id}) if (row.children! = null) {for (let imenu 0, len=row.children.length) I {if (valid) {this.$confirm ('confirm submission?' , 'prompt', {}) .then (() = > {this.editLoading = true let params = Object.assign ({}) This.dataForm) this.$api.menu.save (params) .then ((res) = > {if (res.code = = 200) {this.$message ({message: 'operation successful' Type: 'success'})} else {this.$message ({message:' operation failed,'+ res.msg Type: 'error'})} this.editLoading = false this.$refs [' dataForm'] .permanent Fields () this.dialogVisible = false this.findTreeData ()}) })})} Mounted () {this.findTreeData ()}}

Among them, the table tree component is simply encapsulated.

Views/Core/TableTreeColumn.vue

{{scope.row [prop]}} import isArray from 'lodash/isArray' export default {name:' table-tree-column', props: {prop: {type: String}, treeKey: {type: String, default: 'id'}, parentKey: {type: String, default:' parentId'} LevelKey: {type: String, default: 'level'}, childKey: {type: String, default:' children'}}, methods: {childStyles (row) {return {'padding-left': (row [this.levelKey] * 25) +' px'}} IconClasses (row) {return [! row._expanded? 'el-icon-caret-right':' el-icon-caret-bottom']}, iconStyles (row) {return {'visibility': this.hasChild (row)? 'visible':' hidden'}}, hasChild (row) {return (isArray (isArray [this.childKey]) & & row [this.childKey] .length > = 1) | | false}, / / switch processing toggleHandle (index) Row) {if (this.hasChild (row)) {var data = this.$parent.store.states.data.slice (0) data [index]. _ expanded =! data [index]. _ expanded if (data [index]. _ expanded) {data = data.splice (0) Index + 1) .concat (data [this.childKey]) .concat (data)} else {data = this.removeChildNode (data, row [this.treeKey])} this.$parent.store.commit ('setData', data) this.$nextTick () = > {this.$parent.doLayout ()} / / remove the child node removeChildNode (data, parentId) {var parentIds = isArray (parentId)? ParentId: [parentId] if (parentId.length

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.