本文介绍: 最近做一个后台管理系统菜单权限控制选择菜单用到elementui组件elcascader,只保存最后一级菜单的id,编辑回显时候显示出了问题回显一直是错的,在网上搜索很久没找到合适的,自己写了一个记录一下。

最近做一个后台管理系统菜单权限控制选择菜单用到elementui组件elcascader,只保存最后一级菜单的id,编辑回显时候显示出了问题,回显一直是错的,在网上搜索很久没找到合适的,自己写了一个,记录一下。

<el-form-item label="上级菜单" prop="pid">
          <el-cascader ref="selectMenu" :options="selectTableData"
          :props="{ value: 'id', label: 'menu_name', children: 'children', checkStrictly: true, 	emitPath:false }" 
          clearable @change="onSelectPMenu" v-model="selectMenu"></el-cascader>
</el-form-item&gt;
export default {
	data() {
	    return {
	    	selectMenu: [0],
	    	selectTableData: [],
	    	formData: {
				pid: 0,
			}
		}
	},
	methods: {
		// 回显菜单
	    getPidMenuList(pid) {
	      let cid_list = [];
	      this.selectTableData.forEach((item, index) =&gt; {
	        if (item.id == pid) {
	          cid_list = [item.id];
	          return false;
	        } else {
	          if (item.children) {
	            let newCid_list = [item.id];
	            let list = nodefun(item.children, pid, newCid_list);
	            if (list) {
	              cid_list = list;
	            }
	          }
	        }
	      });
	      // 递归函数
	      function nodefun(newVal, newId, newCid_list) {
	        let flag = false;
	        newVal.forEach((j) =&gt; {
	          if (j.id == newId) {
	            newCid_list.push(j.id);
	            flag = true;
	          } else {
	            if (j.children) {
	              let cid_list = JSON.parse(JSON.stringify(newCid_list));
	              cid_list.push(j.id);
	              let list = nodefun(j.children, newId, cid_list);
	              if (list) {
	                newCid_list = list;
	                flag = true;
	              }
	            }
	          }
	        });
	        if (flag) {
	          return newCid_list;
	        }
	      }
	      return cid_list;
	    },
	    onSelectPMenu(e) {
	      console.log(e)
	      this.formData.pid = e[0]
	      this.$refs.selectMenu.dropDownVisible = false
	    },
	    onEdit(row) {
			this.selectMenu = this.getPidMenuList(row.pid)
		}
	}
		```

原文地址:https://blog.csdn.net/qq_1307495/article/details/128640820

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_42820.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注