element-ui——二级菜单和顶部导航联动

已于 2022-02-16 08:39:29 修改
阅读量3k 收藏 11
点赞数 2
分类专栏： element-ui 文章标签： ui elementui 前端
于 2022-02-14 19:22:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/122919711
版权

目前

原本数据结构

const users = [{
		id: 1,
		username: 'normal',
		password: 'normal',
		token: 'abcdefghijklmnopqrstuvwxyz',
		leftMenus: [{
				title: '用户管理',
				key: '/user',
				name: 'user',
				icon: 'el-icon-user-solid',
				rights: ['view', 'edit', 'add', 'delete']
			},
			{
				title: '商品管理',
				key: '/products',
				name: 'products',
				icon: 'el-icon-s-goods',
				children: [{
						title: '品类管理',
						key: '/category',
						name: 'category',
						icon: 'el-icon-s-ticket',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '商品生产',
						key: '/product',
						name: 'product',
						icon: 'el-icon-s-promotion',
						rights: ['view', 'edit', 'add', 'delete']
					}
				]
			},
			{
				title: '图形图表',
				key: '/charts',
				name: 'charts',
				icon: 'el-icon-picture',
				children: [{
						title: '柱线图',
						key: '/charts/bar',
						name: 'bar',
						icon: 'el-icon-s-data',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '折线图',
						key: '/charts/line',
						name: 'line',
						icon: 'el-icon-s-marketing',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '饼图',
						key: '/charts/pie',
						name: 'pie',
						icon: 'el-icon-s-help',
						rights: ['view', 'edit', 'add', 'delete']
					},
				]
			}
		]
	},
	{
		id: 2,
		username: 'admin',
		password: 'admin',
		token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
		leftMenus: [{
				title: '用户管理',
				key: '/user',
				name: 'user',
				icon: 'el-icon-user-solid',
				rights: ['view', 'edit', 'add', 'delete']
			},
			{
				title: '商品管理',
				key: '/products',
				name: 'products',
				icon: 'el-icon-s-goods',
				children: [{
						title: '品类管理',
						key: '/category',
						name: 'category',
						icon: 'el-icon-s-ticket',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '商品生产',
						key: '/product',
						name: 'product',
						icon: 'el-icon-s-promotion',
						rights: ['view', 'edit', 'add', 'delete']
					}
				]
			},
			{
				title: '角色管理',
				key: '/role',
				name: 'role',
				icon: 'el-icon-s-custom',
				rights: ['view', 'edit', 'add', 'delete']
			},
			{
				title: '图形图表',
				key: '/charts',
				name: 'charts',
				icon: 'el-icon-picture',
				children: [{
						title: '柱线图',
						key: '/charts/bar',
						name: 'bar',
						icon: 'el-icon-s-data',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '折线图',
						key: '/charts/line',
						name: 'line',
						icon: 'el-icon-s-marketing',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						title: '饼图',
						key: '/charts/pie',
						name: 'pie',
						icon: 'el-icon-s-help',
						rights: ['view', 'edit', 'add', 'delete']
					},
				]
			}
		]
	}
]

因为新增顶部导航，所以要重新构建数据结构 。

修改后的数据结构

const users = [{
		id: 1,
		username: 'normal',
		password: 'normal',
		token: 'abcdefghijklmnopqrstuvwxyz',
		navBar: {
			active: '0',
			list: [{
					name: "首页",
					subActive: '0',
					leftMenus: [{
							id: 1,
							title: '用户管理1',
							key: '/user',
							name: 'user',
							icon: 'el-icon-user-solid',
							rights: ['view', 'edit', 'add', 'delete']
						},
						{
							id: 2,
							title: '商品管理',
							name: 'products',
							icon: 'el-icon-s-goods',
							children: [{
									id: 21,
									title: '品类管理',
									key: '/category',
									name: 'category',
									icon: 'bars',
									rights: ['view', 'edit', 'add', 'delete']
								},
								{
									id: 22,
									title: '商品生产',
									key: '/product',
									name: 'product',
									icon: 'tool',
									rights: ['view', 'edit', 'add', 'delete']
								}
							]
						},
						{
							id: 4,
							title: '图形图表',
							name: 'charts',
							icon: 'el-icon-s-platform',
							children: [{
									id: 41,
									title: '柱线图',
									key: '/charts/bar',
									name: 'bar',
									icon: 'el-icon-s-data',
									rights: ['view', 'edit', 'add', 'delete']
								},
								{
									id: 42,
									title: '折线图',
									key: '/charts/line',
									name: 'line',
									icon: 'el-icon-s-marketing',
									rights: ['view', 'edit', 'add', 'delete']
								},
								{
									id: 43,
									title: '饼图',
									key: '/charts/pie',
									name: 'pie',
									icon: 'el-icon-s-help',
									rights: ['view', 'edit', 'add', 'delete']
								},
							]
						}
					]
				},
				{
					name: "商品",
					subActive: '0',
					leftMenus: [{
						id: 1,
						title: '用户管理2',
						key: '/user2',
						name: 'user2',
						icon: 'el-icon-user-solid',
						rights: ['view', 'edit', 'add', 'delete']
					}]
				},
				{
					name: "订单",
					subActive: '0',
					leftMenus: [{
							id: 32,
							title: '订单管理',
							key: '/dingg',
							name: 'dingg',
							icon: 'el-icon-user-solid',
							rights: ['view', 'edit', 'add', 'delete']
						},
						{
							id: 34,
							title: '订单统计',
							name: 'ding',
							icon: 'el-icon-user-solid',
							children: [{
								id: 35,
								title: '订单汇总',
								key: '/ding/hui',
								name: 'dinghui',
								icon: 'el-icon-s-data',
								rights: ['view', 'edit', 'add', 'delete']
							}, ]
						}


					]
				},
				{
					name: "会员"
				},
				{
					name: "设置"
				},
			]
		}
	},
	{
		id: 2,
		username: 'admin',
		password: 'admin',
		token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
		/* rights: [{
      id: 1,
      authName: '用户管理',
      icon: 'icon-menu',
      children: [{
        id: 11,
        authName: '用户项目1',
        path: '/menu/one',
        rights: ['view', 'edit', 'add']
      }, {
        id: 12,
        authName: '用户项目2',
        path: '/menu/two',
        rights: ['view', 'edit', 'add', 'delete']
      }]
    }, {
      id: 2,
      authName: '用户权限',
      icon: 'icon-menu',
      children: [{
        id: 22,
        authName: '权限项目1',
        path: '/menu/three',
        rights: ['view', 'edit', 'add', 'delete']
      }]
    },
	{
	  id: 3,
	  authName: '用户信息',
	  icon: 'icon-menu'
	},
	] */
		leftMenus: [{
				id: 1,
				title: '用户管理',
				key: '/user',
				name: 'user',
				icon: 'el-icon-user-solid',
				rights: ['view', 'edit', 'add', 'delete']
			},
			{
				id: 2,
				title: '商品管理',
				key: '/products',
				name: 'products',
				icon: 'el-icon-s-goods',
				children: [{
						id: 21,
						title: '品类管理',
						key: '/category',
						name: 'category',
						icon: 'bars',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						id: 22,
						title: '商品生产',
						key: '/product',
						name: 'product',
						icon: 'tool',
						rights: ['view', 'edit', 'add', 'delete']
					}
				]
			},
			{
				id: 3,
				title: '角色管理',
				key: '/role',
				name: 'role',
				icon: 'el-icon-s-custom',
				rights: ['view', 'edit', 'add', 'delete']
			},
			{
				id: 4,
				title: '图形图表',
				key: '/charts',
				name: 'charts',
				icon: 'el-icon-s-platform',
				children: [{
						id: 41,
						title: '柱线图',
						key: '/charts/bar',
						name: 'bar',
						icon: 'el-icon-s-data',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						id: 42,
						title: '折线图',
						key: '/charts/line',
						name: 'line',
						icon: 'el-icon-s-marketing',
						rights: ['view', 'edit', 'add', 'delete']
					},
					{
						id: 43,
						title: '饼图',
						key: '/charts/pie',
						name: 'pie',
						icon: 'el-icon-s-help',
						rights: ['view', 'edit', 'add', 'delete']
					},
				]
			}
		]
	}
]

头部布局

		<div class="header-right">
			<el-menu :default-active="user.navBar.active" class="el-menu-demo" mode="horizontal" @select="handleSelect"
			 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item :index="index+''" v-for="(item,index) in user.navBar.list" :key="index">{{item.name}}</el-menu-item>
				<el-submenu index="2">
					<template slot="title">{{user.username}}</template>
					<el-menu-item index="2-1">设置</el-menu-item>
					<el-menu-item index="2-2">退出</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
  methods: {
    ...mapMutations(["getslideMenus"]),
    handleSelect(key, keyPath) {
      this.user.navBar.active = key;
      let item = this.user.navBar.list[this.user.navBar.active];
      console.log(key, keyPath);
      this.getslideMenus(item.leftMenus);
	  this.$router.push({
		  name:item.leftMenus[0].name
	  })
	  if (key == '0') {
		  this.$router.push({
			  name:'welcome'
		  })
	  }
    },
    collapse() {
      this.isCollapseq = !this.isCollapseq;
      this.$bus.$emit("collapseaside", this.isCollapseq);
    },
  },
		mounted() {
			let item = this.user.navBar.list[this.user.navBar.active]
			this.getslideMenus(item.leftMenus)
		},
		computed: {
			...mapState(['user'])
		}

vuex

export default new Vuex.Store({
	state: {
		bread: [],
		slideMenus:[],
		user: JSON.parse(window.sessionStorage.getItem('rightlist')) || {}

	},
	mutations: {
		addBread(state,preload) {
            state.bread = preload
		},
		getslideMenus(state,preload){
			state.slideMenus = preload
	   },
		getLogin(state, preload) {
			state.user = preload
			window.sessionStorage.setItem('rightlist', JSON.stringify(preload))
		}

	},
	getters: {

	},
	actions: {}
})

Header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="header-left__logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="header-left__title">后台管理系统权限Demo</div>
      <i class="el-icon-s-fold icon" @click="collapse"></i>
    </div>
    <div class="header-right">
      <el-menu
        :default-active="user.navBar.active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#333333"
        text-color="#fff"
        active-text-color="#ffd04b"
		
      >
        <el-menu-item
          :index="index + ''"
          v-for="(item, index) in user.navBar.list"
          :key="index"
          >{{ item.name }}</el-menu-item
        >
        <el-submenu index="2">
          <template slot="title">{{ user.username }}</template>
          <el-menu-item index="2-1">设置</el-menu-item>
          <el-menu-item index="2-2">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      isCollapseq: false,
    };
  },
  methods: {
    ...mapMutations(["getslideMenus","getData"]),
    handleSelect(key, keyPath) {
      this.user.navBar.active = key;
      // this.getLogin(this.user)
      let item = this.user.navBar.list[this.user.navBar.active];
      console.log(key, keyPath);
      this.getslideMenus(item.leftMenus);
	  this.$router.push({
		  name:item.leftMenus[0].name
	  })
	  if (key == '0') {
		  this.$router.push({
			  name:'welcome'
		  })
	  }
    window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
    },
    collapse() {
      this.isCollapseq = !this.isCollapseq;
      this.$bus.$emit("collapseaside", this.isCollapseq);
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    let i = JSON.parse(window.sessionStorage.getItem('nactive'))
    this.user.navBar.active = i
    let item = this.user.navBar.list[this.user.navBar.active];
    this.getslideMenus(item.leftMenus);
  },
  watch:{
    $route(to,from){
      window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
      if (to.path == '/welcome') {
          this.user.navBar.active = '0',
          window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
          let item = this.user.navBar.list[this.user.navBar.active]
          this.getslideMenus(item.leftMenus)
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 100%;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 5px #333;
  &-left {
    height: 100%;
    display: flex;
    align-items: center;
    .icon {
      color: #fff;
      margin-left: 30px;
    }
    &__logo {
      width: 80px;
      height: 100%;
      padding: 5px;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    &__title {
      font-size: 20px;
      color: #fff;
      text-shadow: 10px 10px rgba(25, 255, 255, 0.3);
    }
  }
  &-right {
    display: flex;
    align-items: center;
    &__info {
      &-name {
        color: #f0ffff;
        font-size: 16px;
        margin-right: 15px;
      }
    }
  }
}
</style>

 

 Home.vue

  methods: {
    ...mapMutations(["addBread"]),
    /* 面包屑导航 */
    getbreadcrumb() {
      let getobj = this.$route.matched.filter((v) => v.name);
      console.log(getobj);
      let arr = [];
      getobj.forEach((v) => {
        if (v.name == "welcome" || v.name == "Home") {
          return;
        }
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title,
        });
        /* 多级导航 */
        this.slideMenus.forEach((item) => {
          console.log(item);
          if (item.children) {
            item.children.filter((i) => i.key == v.path).length > 0
              ? arr.unshift({ 
				  title: item.title 
				})
              : arr;
          }
        });
      });
        if (arr.length > 0) {
          arr.unshift({
            name: "Home",
            path: "/",
            title: "后台首页",
          });
        }
        this.bran = arr;
        this.addBread(this.bran);
    },
  },

HomeLeft添加个样式判断

<template>
  <div class="navMenu">
    <label v-for="(navMenu,n) in navMenus" :key="n">
      <!--只有一级菜单-->
      <el-menu-item v-if="!navMenu.children"
                    :index="n + ''"
                    :route="navMenu.key"
                    :style="$route.path == navMenu.key?'color:#ffd04b':''"
      >
        <!--图标-->
        <i :class="navMenu.icon" :style="$route.path == navMenu.key?'color:#ffd04b':''"></i>
        <!--标题-->
        <span slot="title">{{navMenu.title}}</span>
      </el-menu-item>
      <!--有多级菜单-->
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.key"
                  :index="n+''"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.title}}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>

  </div>
</template>

<script>
  export default {
    name: 'NavMenu', //使用递归组件必须要有
    props: ['navMenus'], // 传入子组件的数据
    data() {
      return {}
    },
    methods: {
      handleSelect(key,keyPath){
        console.log('1212')
        console.log(key,keyPath)
      }
    }
  }
</script>

<style scoped>

</style>

加个路由

import User2 from '../views/User2.vue'			
            {
				path: '/user2',
				name:'user2',
				meta:{title:'用户管理2'},
				component: User2
			},

现在：

Southern Wind
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用
嗨皮的博客
02-01 6674
基于vue2项目中elementUI组件的简单使用方法
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
【Element入门】5、Element UI 导航组件详解
最新发布
weixin_52938153的博客
05-22 752
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Elementui中El-menu导航栏
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
Vue+ElementUI实现下拉框的二级联动
ChuaWi98的博客
12-03 1万+
项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框选中的数据而变化。 理解业务需求：通常来说我们树型下拉框的数据库设计是在同一个表，且子节点会储存对应的多个祖节点（父节点+父节点的父节点+父节点的父节点的父节点+……+父节点^n）Id。例如：多个城市子节点归属一个省份父节点，多个省份子节点又归属一个国家父节点。这里数据库中城市祖节点就包括了省份Id和国家Id。 如果需要新增城市的下一级，如区和县的子节点，我们直接在市省国的这张表直接添加数据就行，因为这些都属于地名，可以共存或者说共用一张数
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
在本文中，我们将深入探讨Element-UI框架中的级联菜单（Cascader）组件，特别是在实现城市三级联动菜单以及处理回显问题时所遇到的技术细节。Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose...
element给input框加图标
xybhua的博客
12-29 1599
只需要在input中添加一个。只需要在input中添加一个。只需要在input中添加一个。
element-ui实现下拉框二级联动
weixin_57653722的博客
05-09 3105
静态页面是基于element开发的 <el-select v-model="provAndCity.province" @change="handleProvince" clearable > <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"> </el-option> </e
ElementUI 图标Icon
爱喝水的qdy的博客
11-17 4万+
目录官方地址使用方法图标集合 官方地址 https://element.eleme.io/#/zh-CN/component/icon 使用方法 直接通过设置类名为 el-icon-iconName 来使用即可。 图标集合 el-icon-platform-elemeel-icon-elemeel-icon-delete-solidel-icon-deleteel-icon-s-t...
超详细的vue结合ElementUI实现头部导航栏进行页面跳转
qq_48961214的博客
04-24 7804
vue中实现顶部栏路由跳转
基于element-ui的顶部栏
jakelihua
06-27 855
该顶部栏提供了一个简单的登录功能，并以响应式的方式显示用户信息或登录按钮。// 处理用户登录成功的逻辑。/* 顶部栏内容样式 *//* 去除左右间隙 *//* 文字向上移动 *//* 按钮向上移动 *//* 左右间隙填充 *//* 文字向上移动 *//* 登录按钮样式 *//* 按钮向上移动 */// 登录对话框的可见性。/* 调整内边距 */// 登录成功后的处理。/* 内边距调整 *//* 垂直居上 */// 显示登录对话框。// 关闭登录对话框。/* 容器样式 *//* 垂直居上 */
ElementUI浅尝辄止32：NavMenu 导航菜单
渣渣砖
09-06 1716
为网站提供导航功能的菜单。
elementui dropdown实现二级菜单
weixin_43371136的博客
01-06 6313
<el-dropdown @command="handleCommand($event, key)" size="medium" trigger="click" :hide-on-click="false" 是否在点击菜单项后隐藏菜单 v-else :class="value.className" > <span>
elementui二级菜单
aitengteng1的博客
05-10 2264
<el-menurouter:default-active="activeIndex"mode="horizontal"@select="handleSelectMenu"> <!--<el-menu-itemstyle="border:none"v-for="(item,index)inmenuData":index="index+''":key="index":route="{name:item.routername}...
element ui+vue实现导航栏菜单以及页面跳转
H-rosy的博客
06-24 1万+
关于博主： 不知道算不算的上入门，就是刚刚学习vue框架，断断续续的学习，所以有些地方讲的不正确也欢迎大家批评斧正，希望与大家共同进步 问题描述 对于初学前端的我们来说搭建一个路由导航界面还是比较困难的，在这里给大家分享一下最近我学到的一些这方面的知识 首先给大家看看效果图吧： 写的就是一些很基础的东西，因为这主要是学习路由导航的搭建原理。下面这个代码就是router下的index.js文件，就是配置路由的地方，如果你对路由的注册还不太懂请戳这里 import Vue from 'vue' impor
element 下拉框联动_element-ui select 二级联动
09-17
### 回答1： 在 element-ui 中，可以通过 `cascader` 组件实现下拉框的联动。以下是一个示例代码片段，实现了两个下拉框的二级联动： ``` <template> <div> <el-cascader v-model="selectedCities" :options="cities" @change="handleCityChange" clearable ></el-cascader> <el-cascader v-model="selectedDistricts" :options="districts" :show-all-levels="false" clearable ></el-cascader> </div> </template> <script> export default { data() { return { cities: [ { value: 'beijing', label: '北京', children: [ { value: 'dongcheng', label: '东城', }, { value: 'xicheng', label: '西城', }, ], }, { value: 'shanghai', label: '上海', children: [ { value: 'pudong', label: '浦东', }, { value: 'minhang', label: '闵行', }, ], }, ], districts: [], selectedCities: [], selectedDistricts: [], }; }, methods: { handleCityChange(value) { const city = this.cities.find((c) => c.value === value[0]); if (city) { this.districts = city.children; } else { this.districts = []; } this.selectedDistricts = []; }, }, }; </script> ``` 在上述代码中，我们使用了两个 `el-cascader` 组件，第一个用于选择城市，第二个用于选择区县。当城市选择发生变化时，我们根据所选城市的子节点来更新区县下拉框的选项，并将其值清空，以避免用户选择错误的区县。 ### 回答2： element是一款基于Vue.js的UI组件库，提供了一系列的常用组件。其中，element中的select组件支持二级联动功能。下面我将详细解释如何使用element-ui实现select组件的二级联动。 首先，我们需要引入element-ui的select组件和option组件，并在Vue实例中注册这两个组件。 在template中，我们需要使用el-select和el-option标签来构建下拉框。el-select用于显示下拉框，el-option用于显示下拉框的选项。 二级联动的实现思路是，根据第一个下拉框的选项，动态生成第二个下拉框的选项。我们可以通过监听第一个下拉框的值的变化，动态更新第二个下拉框的选项。具体实现如下： 1. 在data中定义需要的数据，包括第一个下拉框和第二个下拉框的选项数据。 2. 在template中，使用el-select标签构建第一个下拉框，并绑定一个v-model，用来获取选中的值。 3. 监听第一个下拉框的值的变化，使用watch选项，在回调函数中根据选中的值动态生成第二个下拉框的选项。 4. 在template中，使用el-select标签构建第二个下拉框，并绑定一个v-model，用来获取选中的值。 通过以上步骤，我们可以实现element-ui select组件的二级联动。当第一个下拉框的值改变时，第二个下拉框的选项也会相应改变。 需要注意的是，我们可以根据实际需求进行修改和扩展，例如三级联动、四级联动等，只需要在第三个、第四个下拉框中添加相应的监听和选项即可。 希望以上回答能帮助到您，如有其他问题，欢迎继续提问。 ### 回答3： element 也是一个流行的前端 UI 框架，它提供了许多实用的组件，其中包括 select 下拉框。而在 element 的 select 中实现二级联动可以通过监听第一个下拉框的变化来动态修改第二个下拉框的选项。 首先，在 Vue 的实例中，我们需要定义两个变量，例如 province 和 city，分别用来保存第一级和第二级联动的选项。然后，我们在模板中使用 element 的 select 组件，并绑定相应的变量。 在第一个下拉框中，我们需要设定一个监听函数，例如 handleChangeProvince，当选择了某一个省份时，该函数会被触发。在该函数中，我们可以根据选择的省份来更新第二个下拉框的选项，例如将 city 设为该省份所对应的城市列表。 实现这一过程的关键在于如何将第一个下拉框的选项和第二个下拉框的选项进行关联。一种常见的做法是通过一个对象的键值对来表示对应关系，例如一个 provinces 对象保存了省份和城市的对应关系，其中键表示省份，值表示对应的城市列表。当选择了某一个省份时，我们可以通过 provinces[province] 来获取该省份所对应的城市列表。 最后，我们将更新后的城市列表赋给第二个下拉框的选项，这样就实现了二级联动。需要注意的是，当再次选择第一个下拉框时，第二个下拉框的选项也需要更新，以保证联动效果。 总之，通过利用 element 的 select 组件和 Vue 的监听函数，我们可以轻松实现二级联动的下拉框。这样用户可以根据自己的需求选择对应的选项，提升了用户体验和交互性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值