ElementPlus的Collapse 折叠面板问题

news2024/11/17 3:30:59

我也不明白为什么会报这个错误,把关于ts的代码改成js的就可以了。。

 ERROR in ./src/views/Home.vue?vue&type=script&lang=ts&setup=true (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Home.vue?vue&type=script&lang=ts&setup=true) 17:23 Module parse failed: Unexpected token (17:23) File was processed with these loaders: * ./node_modules/vue-loader/dist/index.js You may need an additional loader to handle the result of these loaders. | | const isCollapse = ref(true) > const handleOpen = (key: string, keyPath: string[]) => { | console.log(key, keyPath) | } ERROR in ./src/views/Home.vue?vue&type=template&id=fae5bece&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Home.vue?vue&type=template&id=fae5bece&ts=true) 7:27 Module parse failed: Unexpected token (7:27) File was processed with these loaders: * ./node_modules/vue-loader/dist/templateLoader.js * ./node_modules/vue-loader/dist/index.js You may need an additional loader to handle the result of these loaders. | const _hoisted_3 = /*#__PURE__*/_createElementVNode("span", null, "item four", -1 /* HOISTED */) | > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) { | const _component_el_radio_button = _resolveComponent("el-radio-button")! | const _component_el_radio_group = _resolveComponent("el-radio-group")! ERROR [eslint] C:\Users\xin\Desktop\exampro\src\views\Home.vue 56:23 error Parsing error: Unexpected token :

 

 

<template>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :label="false">expand</el-radio-button>
    <el-radio-button :label="true">collapse</el-radio-button>
  </el-radio-group>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/711772.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大厂经验,基于资产健康度量化的小米数据治理实践

摘要&#xff1a;随着小米公司各项业务的快速发展&#xff0c;数据中的商业价值也愈发突显。而与此同时&#xff0c;各业务团队在数据查询、分析等方面的压力同样正在剧增。小米大数据团队用大数据管理大数据&#xff0c;从存储、计算、规范、质量、安全五方面着手治理&#xf…

java swing实现JTextField文本框的输入提示补全功能,以登陆界面自动提示补全用户账号为例,自动填充账号密码

前言 如果您想了解更多的java项目功能源码,请订阅我的专栏: java项目源码合集100+ 一、实现的功能 在使用java做界面实现输入功能的时候,使用了JTextField文本输入组件,希望能够根据用户的输入,自动提示,之后用户可以选择提示的内容作为文本框的输入内容,效果如下: 当…

Java中的阻塞队列使用以及详解

文章目录 一、Queue接口1. 常见方法以及功能(不具有阻塞队列特性)1.1 add(E e)1.2. offer():1.3. remove()1.4. poll()1.5. element()1.6. peek() 2. add和offer对比&#xff1a;3. remove和poll对比&#xff1a;4. element#peek方法对比&#xff1a; 二、BlockingQueue阻塞队列…

MySQL:子查询(全面详解)

MySQL&#xff1a;子查询 前言一、需求分析与问题解决1、实际问题2、子查询的基本使用3、子查询的分类 二、单行子查询1、单行比较操作符2、代码示例3、HAVING 中的子查询4、CASE中的子查询5、子查询中的空值问题6、非法使用子查询 三、多行子查询1、多行比较操作符2、代码示例…

Unity VR 开发教程 OpenXR+XR Interaction Toolkit(八)手指触控 Poke Interaction

文章目录 &#x1f4d5;教程说明&#x1f4d5;XR Poke Interactor&#x1f4d5;与 UI 进行触控交互⭐添加 Tracked Device Graphic Raycaster 和 XR UI Input Module 让 UI 可被交互 &#x1f4d5;与物体进行交互⭐XR Simple Interactable⭐XR Poke Filter 往期回顾&#xff1a…

偏爱console.log的你,肯定会觉得这个插件泰裤辣!

前言 毋庸置疑&#xff0c;要说前端调试代码用的最多的&#xff0c;肯定是console.log&#xff0c;虽然我现在 debugger 用的比较多&#xff0c;但对于生产环境、小程序真机调试&#xff0c;还是需要用到 log 来查看变量值&#xff0c;比如我下午遇到个场景&#xff1a;选择完…

单片机-串口通信

1.串口向电脑发送数据 1.配置串口 T1定时器&#xff0c;方式二8位重装 void UartInit(void) //4800bps11.0592MHz {PCON & 0x7F; //波特率不倍速SCON 0x50; //8位数据,可变波特率TMOD & 0x0F; //清除定时器1模式位TMOD | 0x20; //设定定时器1为8位自动重装方式…

Win11桌面右键菜单怎么变成老版本?

Win11桌面右键菜单怎么变成老版本&#xff1f;Win11系统带来了许多新的功能和改进&#xff0c;其中一个显著的变化是Win11桌面右键菜单的设计和布局&#xff0c;所以有些用户就想把Win11桌面右键菜单变成老版本&#xff0c;那具体怎么操作&#xff0c;可以按照以下小编分享的方…

chatgpt赋能python:用Python关机:简单、快捷、高效的关机方式

用Python关机&#xff1a;简单、快捷、高效的关机方式 介绍 在我们使用计算机的日常生活中&#xff0c;关机是必不可少的一个要素。传统的关机方式通常是通过点击“开始”菜单——“关机”按钮来完成的。但是&#xff0c;使用Python可以让我们更加方便和高效地完成关机操作。…

海外媒体发稿:海外新闻发表文章的必要性

海外新闻发表文章&#xff0c;是指国外企业在当地新闻媒体上发表企业信息和企业企业形象活动&#xff0c;通过专业媒体网络资源&#xff0c;依靠技术专业的报道发稿平台&#xff0c;让国外企业迅速、精确、低成本开展海外新闻稿子的出台&#xff0c;根据媒体报导&#xff0c;提…

PyQt5入门1——PyQt5的安装与Hello World应用

PyQt5入门1——PyQt5的安装与Hello World应用 学习前言简介&#xff08;From 百度百科&#xff09;安装Hello World1、窗口构建a、构建基础类b、编写UI 2、主程序运行 全部代码 学习前言 搞搞可视化界面哈&#xff0c;虽然不一定有用&#xff0c;但是搞一下。 简介&#xff…

Makefile实战

文章目录 1、准备环境1.2、规则1.3、假目标1.4、变量1.5、自动变量1.6、函数addprefix 函数filter函数filter-out函数patsubst函数strip函数wildcard函数 1、准备环境 准备一台Linux机器&#xff0c;验证环境中是否呗正确安装了&#xff0c;使用make -v命令进行验证 1.2、规则 …

React中useState的setState方法请求了好多次

1、问题描述 最近在写react的时候碰到了一个很奇怪的问题。 可以看到那个getXXX()的方法一直不断的被调用&#xff0c;网页一直请求&#xff0c;根本停不下来了。 2、产生原因 要弄明白这个原因&#xff0c;首先要先了解一下react生命周期。 react是组件式的编程&#xff0c;一…

青岛大学_王卓老师【数据结构与算法】Week04_01_循环链表_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c;另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础–…

GO SDK使用说明

简介 欢迎使用腾讯云开发者工具套件&#xff08;SDK&#xff09;3.0&#xff0c;SDK 3.0 是云 API 3.0 平台的配套工具。SDK 3.0 实现了统一化&#xff0c;各个语言版本的 SDK 具备使用方法相同、接口调用方式相同、错误码和返回包格式相同等优点。本文以 GO SDK 3.0 为例&…

chatgpt赋能python:用Python编写BMI计算器,实现身体指数(BMI)的快速计算和分析

用Python编写BMI计算器&#xff0c;实现身体指数&#xff08;BMI&#xff09;的快速计算和分析 在当今的健康意识逐渐增强的时代&#xff0c;身体指数&#xff08;BMI&#xff09;成为了一个非常重要的健康指标。BMI是根据身高和体重计算出来的数值&#xff0c;用于评估一个人…

java pdf2html 和html2pdf 两款插件

1 pdf2html docker 启动&#xff0c;java 调用服务即可转化 https://beltxman.com/2567.html docker run -ti --rm -v ~/pdf:/pdf -w /pdf docker.io/pdf2htmlex/pdf2htmlex:0.18.8.rc2-master-20200820-ubuntu-20.04-x86_64 test.pdf 2 html2pdf java .Runtime 类型调用命…

超详细讲解在Ubuntu 20.04上安装ROS Noetic Ninjemys并测试

文章目录 前言安装STEP-1: 配置Ubuntu软件仓库STEP-2: 设置sources.listSTEP-3: 设置密钥STEP-4: 更新Ubuntu软件包确保安装索引是最新的STEP-5: 执行安装命令STEP-6: 配置ROS环境 测试ROS 前言 ROS是Robot Operating System的缩写, 即机器人操作系统, ROS是一组软件库和工具&…

LR录制https协议脚本前配置

LR录制https安全协议脚本前的设置 在IE中添加安全证书 打开IE浏览器&#xff0c;选择“工具—Internet选项—内容”&#xff0c;点击“证书”导入相应的证书&#xff0c;如下图 在LR中配置证书 获取pem格式证书 因为loadrunner只支持pem格式的证书&#xff0c;所以要将证书…

uniapp监听手机侧滑返回事件。

这篇文章是应一个粉丝的需求更新的&#xff01;你们看我多宠粉&#xff01; 若在App首页&#xff0c;点击手机物理返回键&#xff0c;此时无返回页面可关闭&#xff0c;uni-app默认会提示“再按一次退出应用”&#xff1b;若想自定义退出信息&#xff0c;如修改为&#xff1a;…