、官方文档:https://element.eleme.cn/#/zh-CN/component/calendar

发现官方并无农历显示的介绍

、1. 自己写阳历转阴历的方法或引入别人写好的 JS 文件,如中国农历(阴阳历)和西元阳历即公历互转 JavaScript 库

2. 如果是引入上面的 JS 文件,我把它放在 src/utils/js 文件夹下,即位置为 src/utils/calendar.js,需要在 calendar.js 文件的最后一行添加 export default calendar; 如果使用了ESLint,需要在 calendar.js 文件的第一行添加 /* eslint-disable */

3.在 Vue 中使用 Element 的 calendar 组件并自定义内容,date.day 为日历上每一天的日期(如 2020-01-04),需要什么样的格式就自定义方法(如 solarDate2lunar(solarDate))输出。

引入calendar.js

import calendar from '../../utils/calendar'
      <el-calendar>
<template slot="dateCell" slot-scope="{ date, data }">
<p style="white-space: pre-line;">
{{ solarDate2lunar(data.day) }}
</p>
</template>
</el-calendar>
    // 农历显示
solarDate2lunar(solarDate) {
var solar = solarDate.split('-')
var lunar = calendar.solar2lunar(solar[], solar[], solar[])
// return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn
return solar[] + '\n' + lunar.IMonthCn + lunar.IDayCn
}

三、效果(自己优化)

element-ui 组件 el-calendar 农历显示问题的更多相关文章

  1. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  2. ReactNative Android之原生UI组件动态addView不显示问题解决

    ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com ...

  3. element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  4. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  5. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  6. Element UI组件说明

    -<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...

  7. vue问题五:element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  8. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  9. element ui改写实现两棵树

    使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...

  10. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

随机推荐

  1. Qt Installer Framework翻译(6-0)

    Qt安装程序框架示例 这些示例说明了如何使用组件脚本来自定义安装程序. Change Installer UI Example 使用组件脚本修改安装程序UI. Component Error Exam ...

  2. Beat our dice game and get the flag 击败我们的骰子游戏拿到旗子

    文件名:ebCTF-Teaser-BIN100-Dice.exe 话不多说 用PEID一看没壳 拖进OD 让我们摇出31337这五个数字才能拿到正确的flag cmp dword ptr ss:[eb ...

  3. 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一)(条件构造器)

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询 代码下载:ht ...

  4. django cms 5月第一弹

    官方文档: ##http://django-cms.readthedocs.io/en/latest/index.html #截图 #生存的项目结构

  5. HGE_improve 0.1发布

    HGE_improve 0.1发布 写了1个月了,虽然还有很多很多缺陷,但丑姑娘也是要见公婆的. 主要修改如下: 1.全UNICODE化 2.增加切片动画 3.增加骨骼动画 4.增加MyGUI接口 5 ...

  6. 深入理解ClassLoader

    深入理解ClassLoader ClassLoader 作用 负责将 Class 加载到 JVM 中 ClassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoade ...

  7. laravel 操作多数据库总结

    laravel 操作多数据库总结 读写分离 env配置 DB_CONNECTION=mysql DB_HOST=xxxxxx DB_PORT=xxx DB_DATABASE=xx DB_USERNAM ...

  8. Docker(二):理解容器编排工具Kubernetes内部工作原理

    一.Kubernetes是什么 要说到Docker就不得不说说Kubernetes.当Docker容器在微服务的环境下数量一多,那么统一的,自动化的管理自然少不了.而Kubernetes就是一个这样的 ...

  9. mysql基础--查询

    1.mysql查询的五种子句: where子句(条件查询):按照“条件表达式”指定的条件进行查询. group by子句(分组):按照“属性名”指定的字段进行分组.group by子句通常和count ...

  10. webpack入门系列2

    前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶. 1.使用 webpack 构建本地服务器: 想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webp ...