ElementUI中的日历组件加载无效的问题

最新推荐文章于 2024-03-13 15:44:33 发布
最新推荐文章于 2024-03-13 15:44:33 发布
阅读量1.7k 收藏
点赞数 1
文章标签： elementui el-calendar 日历 不显示 组件 Vue
禁止转载
本文链接：https://blog.csdn.net/qq_38526573/article/details/132463459
版权

  在ElementUI中提供了一个日历组件。在某些场景下还是比较有用的。只是在使用的时候会有些下坑，大家要注意下。
在这里插入图片描述
  官网提供的信息比较简介。我们在引入到项目中使用的时候可以能会出现下面的错误提示。
在这里插入图片描述

Unknown custom element: <el-calendar> - did you register the component correctly? For recursive comp

提示你不能识别这个标签。这时我们需要收到的引入这个组件。
在这里插入图片描述
访问可以看到日历数据。但是样式有丢失

在这里插入图片描述

这时我们还需要在main.js 中引入样式文件

import 'element-ui/lib/theme-chalk/index.css'

然后访问就可以了
在这里插入图片描述

波波烤鸭
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
主要介绍了基于Vue2-Calendar改进的日历组件（含中文使用说明）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue+elementUI实现简单日历功能
10-14
主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3中组件不显示的解决方法（已解决）
最新发布
m0_54568435的博客
03-13 1345
方法来动态加载 Element Plus 的组件，以避免编译时无法解析的问题。这样可以确保在运行时正确加载 Element Plus 的组件。方法来动态加载 Element Plus 的组件，可以在运行时正确解析组件，避免编译时的错误。选项1选项2选项3
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
Element UI-Calendar日历只显示当前月
itmacy的博客
10-31 1147
通过css样式控制不显示上一个月和下一个月的天数，并且不可点击。css样式，这里使用的是scss。
element-plus，el-calendar日历组件使用#date-cell插槽无效、不生效
暴走的山交君的博客
10-20 701
这时候只需要将#date-cell改成#dateCell就可以了，修改之后插槽就能用了。不生效，插槽没有被检测到，打开官网的在线编辑器也是一样。使用elementplus的时候发现。日历组件，需要使用插槽自定义内容。最近在升级项目的时候用到了。
element ui el-calendar日历组件使用总结
欧阳的技术博客
05-04 1万+
element ui + vue el-calendar日历组件使用总结
vue自定义使用elementUI的日历组件
qq_35946021的博客
04-18 3582
vue自定义使用el-calendar日历组件
element-ui日历组件el-calendar选中特定时间以及样式修改
笑到世界都狼狈的博客
03-02 7660
element-ui日历的组件，标记特定时间，修改组件样式
Element浅尝辄止11：Calendar日历组件
渣渣砖
08-28 488
通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。
elementUI 日期组件 ＜el-date-picker type=“daterange“ ＞ 时间范围遇到的问题 tips
qq_44325545的博客
07-04 1904
原因：检查页面是否添加 scoped，如果添加了 scoped ，很可能是他的原因导致的，但是页面中如果去掉的话，可能会对系统中其他位置的样式造成干扰，不建议直接删除；由于此组件是直接渲染在 body 中的，很有可能在当前组件使用页面中，拿不到其 dom ，所以无法更改属性，即使加了穿透也不会生效。b）问题：删除右侧日历后，左侧日历第一次打开正常切换，当选择一个时间区间后，再次打开会出现，切换按钮被禁用，无法切换时间。2.若在同一日历中选择时间范围，只需将其联动解除，并隐藏右侧日历框。
Vue3+Typescript日历组件
07-29
通过Vue3+TypeScript实现的日历组件，组件有显示阳历，阴历，星座，假期等等功能；
vue实现一个炫酷的日历组件
10-17
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
el-calendar 日历点击事件获取不到问题
热门推荐
The_more_more的博客
06-26 1万+
el-calendar 日历点击事件获取不到问题
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
weixin_50041614的博客
11-03 2939
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
element 日历组件应用相关的问题
weixin_43254676的博客
12-11 2851
element calendar组件修改按钮原生组件，添加按钮点击，日历仅显示本月，以今天为节点做样式区分
elementUi el-calendar日历组件使用方法
m0_61449795的博客
11-17 837
everydayDto.setThings("工作内容："+data.getJobContent());@ApiModelProperty(value = "工作内容")@ApiModelProperty(value = "是否提醒")@ApiModelProperty(value = "提醒日期")@ApiModelProperty(value = "内容")@ApiModelProperty(value = "年")@ApiModelProperty(value = "月")
Unknown custom element did you register the component correctly
CaseyWei
04-09 1万+
1、错误描述 vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: <el-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option. fou...
如何二次封装ElementUI中的日历组件
06-03
二次封装ElementUI中的日历组件可以使代码更加简洁和易于维护，同时也能提高开发效率。以下是一个简单的二次封装ElementUI中日历组件的示例： 1. 创建一个自定义的日历组件 ```javascript <template> <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" ></el-date-picker> </template> <script> export default { name: 'MyDatePicker', props: { value: { type: Array, default: () => [null, null] }, pickerOptions: { type: Object, default: () => ({}) } } } </script> ``` 2. 在父组件中使用自定义的日历组件 ```javascript <template> <div> <my-date-picker v-model="dateRange" :picker-options="pickerOptions" /> </div> </template> <script> import MyDatePicker from '@/components/MyDatePicker.vue' export default { components: { MyDatePicker }, data() { return { dateRange: [null, null], pickerOptions: { disabledDate: (time) => { return time.getTime() > Date.now() } } } } } </script> ``` 在以上代码中，我们创建了一个名为MyDatePicker的组件，该组件接受一个value属性和一个pickerOptions属性，其中value属性是一个数组，用于绑定选中的日期范围，pickerOptions属性是一个选项对象，用于配置日期选择器的一些选项，例如禁用未来日期等。在父组件中使用MyDatePicker组件时，我们可以通过v-model指令绑定选中的日期范围，并通过picker-options属性向MyDatePicker组件传递选项对象。 通过以上的二次封装，我们可以在多个页面中复用MyDatePicker组件，同时也可以通过修改pickerOptions属性来改变日期选择器的行为，这样可以大大提高代码的复用性和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

波波烤鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值