Vue3的设置左侧导航高度全屏显示和element-icon在循环时如何使用

项目左侧导航自动获取高度

 <el-row
    class="tac"
    :style="containerHeight"
  >
  </el-row>

export default {
  name: "LeftNav",
  data () {
    return {
      number: 100,
      circleUrl: "../assets/img/tx.png",
      containerHeight: {
        height: ""
      }  
    }
  },
  created () {
    //动态调整左侧菜单栏高度
    var docHeight = document.documentElement.clientHeight;
    this.containerHeight.height = docHeight + "px";
  }

 
}

效果图如下：

实现对element-icon在循环时如何使用

Vue代码

 <el-menu
        text-color="#eee"
        background-color="#2f4056"
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-sub-menu
          v-for="item in listMenu"
          :key="item.index"
          :index="item.index"
          :ref="item"
        >
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{item.tabName}}</span>
          </template>
          <el-menu-item-group
            v-for="i in item.children"
            :key="i.key">
            <el-menu-item
              :index="i.key"
              :route="i.router"
              @click="selectMenu(i)"
            >{{i.title}}</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>

 listMenu: [{
        index: 1, tabName: "学生管理", icon: "UserFilled", children: [
          {
            key: '1-1',
            router: "stu_info",
            title: '学生信息'
          },
          {
            key: '1-2',
            router: "stu_score",
            title: '学生成绩'
          },
        ],
      }, {
        index: 2, tabName: "老师管理", icon: "Female", children: [
          {
            key: '2-1',
            router: "teacher_info",
            title: '老师信息'
          },
          {
            key: '2-2',
            router: "teacher_dis",
            title: '课程分配'
          },
        ],
      }, {
        index: 3, tabName: "课程管理", icon: "Edit", children: [
          {
            key: '3-1',
            router: "course_info",
            title: '课程信息'
          },
          {
            key: '3-2',
            router: "course_dis",
            title: '课程分配'
          },
        ],
      }, {
        index: 4, tabName: "系统管理", icon: "IconMenu", children: [
          {
            key: '4-1',
            router: "user_info",
            title: '用户信息'
          },
          {
            key: '4-2',
            router: "log_info",
            title: '日志管理'
          }, {
            key: '4-3',
            router: "sys_info",
            title: '系统通告'
          }
        ],
      }]