vue iview 导航高亮动态设置

本文介绍如何在Vue项目中使用iView UI框架实现菜单导航的动态高亮效果,通过监听路由变化更新active-name属性,确保当前激活的菜单项始终处于高亮状态。

##vue iview 导航高亮动态设置
在这里插入图片描述
在开发的是时候,路由发生了跳转但是发现导航的没有进行高亮设置,在iview的menu组件中控制高亮的是active-name,现在动态设置active-name 完成高亮

<Menu :active-name="activeName" theme="light" width="auto" :open-names="['2','3','4']">
		
	<Submenu name="2">
		<template slot="title">
			<Icon type="ios-navigate"></Icon>
			信息查询
		</template>
		<MenuItem name="travel/" to="travel">信息查询</MenuItem>
	</Submenu>
	<Submenu name="3" v-if="is_super">
		<template slot="title">
			<Icon type="ios-keypad"></Icon>
			信息管理
		</template>
		<MenuItem name="TravelManage" to='TravelManage'>信息管理</MenuItem>
	</Submenu>
	<Submenu name="4">
		<template slot="title">
			<Icon type="ios-contact"></Icon>
			个人信息
		</template>
		<MenuItem name="UserInform" to='UserInform'>个人资料</MenuItem>
	
	</Submenu>
</Menu>
export default {
	name: '',
	data() {
		return {
			activeName: this.$router.path,
		}
	},
	methods:{
		 menuList(){  // 这个方法里定义好,高亮和路由
			let path = this.$route.matched[1].path  
			this.activeName=path.substr(1)
        }
	},	
	
	mounted() {
		this.menuList()
	}
}
iview组件库中,`highlightCurrentRow`是一个属性用于在Vue的表格组件`Table`中实现当前行的高亮效果。当设置为`true`,它会在用户点击表格中的某一行自动将该行标记为高亮,突出显示选中的数据。这个功能有助于提高用户体验,让用户快速定位到正在交互的数据项。 如果你想设置多行高亮iview的`Table`组件本身并不直接支持多行同高亮,但是你可以通过自定义事件或者在渲染判断并手动改变每一行的样式来达到类似的效果。例如,你可以维护一个数组来记录哪些行需要高亮,然后在`v-bind:class`里添加条件来动态改变class名。 以下是简单的示例: ```html <template> <div> <Table :data="tableData" @on-row-click="handleRowClick" :highlight-current-row="true"> <!-- ... 表格列配置 ... --> </Table> </div> </template> <script> export default { data() { return { tableData: [], // 数据源 highlightedRows: [], // 存储高亮行 }; }, methods: { handleRowClick(row) { if (this.highlightedRows.includes(row.rowKey)) { this.highlightedRows = this.highlightedRows.filter(item => item !== row.rowKey); } else { this.highlightedRows.push(row.rowKey); } }, }, computed: { rowClasses(row) { return { 'highlight': this.highlightedRows.includes(row.rowKey), /* 根据需求添加其他高亮样式 */ }; }, }, }; </script> ``` 在这个例子中,每次点击行,会检查是否已经在`highlightedRows`中,如果在则移除,不在则添加,并更新`rowClasses`计算属性以应用高亮样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值