要将“展开，收起”的功能从单选按钮更改为点击图标，你可以使用一个图标作为按钮来切换 isCollapse 的值。下面是如何实现的示例：
- 使用
el-icon组件显示展开和收起的图标。 - 创建一个方法来切换
isCollapse的状态。
修改后的代码如下：
<template><div><el-button @click="toggleCollapse" style="margin-bottom: 20px;"><i class="el-icon" :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i>{{ isCollapse ? '展开' : '收起' }}</el-button><el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><!-- 其他菜单项 --><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item>< el-men u -item index = "4"><i class = " el - icon - setting " > </i> <span slot = " title " > 导航四 </span> </ el - menu - item ></ el - menu ><style >. el - menu - vertical - demo:not(. el - menu -- collapse) {width: 200px;min-height: 400px;}</style><script >export default {data() {return {isCollapse: true};},methods: {toggleCollapse() {this.isCollapse = !this.isCollapse;},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}};</script>
改动说明：
- 用
<button>或者ElButton来替代原来的单选按钮。 - 在按钮中添加一个图标和文本，以指示当前的折叠状态。
- 添加了
toggleCollapse方法，用于切换isCollapse的值。
这样，用户可以通过点击图标来展开或收起菜单，而不是使用单选框。
内容由零声教学AI助手提供，问题来源于学员提问
