要实现点击图标来控制展开和收起的功能，可以将原来的 el-radio-group 替换为两个图标按钮（分别是“折叠”和“展开”）。以下是完整代码，已进行相应修改：

<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <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-menu-item index="4">
                <i class=" el-icon-setting"></i>
                <span slot="title">导航四</span>
            </el-menu-item>    
        </ el - menu >
        <
        el - container >
        <
        el - header style = "text-align: right; font-size: 12px" >
        <
        span style = "float:left;margin-top:10px;" > 
          <!-- 点击图标实现展开/收起功能 -->
          <!-- 添加折叠图标 -->
          < el - icon v - if = "!isCollapse" @click = "toggleCollapse" > 
              <!-- 使用适当的 Fold 图标组件 -->
              <!-- 假设这是你导入的折叠图标组件 --> 
              Fold 
          </ el - icon >
          <!-- 添加展开图标 -->
          <
          el - icon v - if = "isCollapse" @click = "toggleCollapse" > 
              <!-- 使用适当的 Expand 图标组件 -->
              <!-- 假设这是你导入的展开图标组件 --> 
              Expand 
          </ el - icon >

      <
      / span >
      <
      el - dropdown >
      <
      i class = " el-icon-setting " style = "margin-right: 15px" > 
      <
      / i >
      <
      el-dropdown-menu slot = "dropdown" >
      <
      el-dropdown-item > 查看 <
      / el-dropdown-item >
      <
      el-dropdown-item > 新增 <
      / el-dropdown-item >
      <
      el-dropdown-item > 删除 <
      / el-dropdown-item >
    <
    / el-dropdown-me nu >
  <
  / el-dropdown >
  <
  span > 王小虎 </ span >

< /
  el-header >

< /
  template >

< style >
.el_menu_vertical_demo:not(.ele_menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
<
/style>

<script>

export default {
    name: 'layoutPage',
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路1518弄'
        };
        return {
            tableData: Array(20).fill(item),
            isCollapse: true // 初始状态为收起
        }
    },
    methods:{
       toggleCollapse(){
           this.isCollapse= !this.isCollapse; // 切换状态
       },
       handleOpen(key, keyPath) {
           console.log(key, keyPath);
       },
       handleClose(key, keyPath) {
           console.log(key, keyPath);
       }
   }
};

< /
script >

修改说明：

1. 添加了切换功能：在 <template> 中用 <El-icon> 来替代 radio-button，并且根据当前的 isCollapse 状态显示不同的图标（假定已经导入了相应的 Fold 和 Expand 图标）。
2. 定义了切换方法：通过 toggleCollapse 方法来切换菜单状态。
3. 保持其他功能不变，确保整体结构和样式一致。

请确保您已经引入了需要使用的图标组件，并根据需要调整其具体实现。


内容由零声教学AI助手提供，问题来源于学员提问