、官方文档: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. Miniio安装登陆密码报错问题,注意检查区分带小写!

    ------------恢复内容开始------------ #创建minio专用文件目录mkdir -p /app/minio/datamkdir -p /app/minio/configchmod ...

  2. UML--->用例图梳理

    用例图梳理 概述 用例图主要用来描述"用户.需求.系统功能单元"之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. 用例图的主要目的是帮助开发团队以一种可视化的方式理解系 ...

  3. sublime3 docblocker 注释插件的配置

    sublime3 docblocker插件定制自己的注释,配置步骤 DocBlockr很好用,不仅仅可以自动生成注释,还可以手动编辑注释的格式. 安装方法:  Cmd+Shift+P -> In ...

  4. vue计算属性和方法的区别

    计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...

  5. orcle导入大数据文件

    0,创建ctl文件  内容为 OPTIONS (skip=0) LOAD DATA  CHARACTERSET 'UTF8' INFILE 'F:\anhui_data\20180814\shangh ...

  6. C++使用类调用CUDA核函数

    正如CUDA C所称,CUDA对C语言进行了很好的扩展,直接使用C语言可以非常简单方便的调用CUDA核函数.但是当想使用C++的类成员函数直接调用核函数是不可行的,第一,核函数不能作为类的成员函数,第 ...

  7. HDU_3183_RMQ

    http://acm.hdu.edu.cn/submit.php?pid=3183 初探rmq,这道题看了题解还是写了好久.原因是rmq处理字符串时没有自己写min函数,导致把返回的字符当成下标处理了 ...

  8. ARTS Week 5

    Nov 25, 2019 ~ Dec 1, 2019 Algorithm 深度优先搜索--书籍分配 题目描述:有b1-b5五本书,要分配给五个学生,分别是a1-a5.但每个学生都有其喜欢的书,要检查是 ...

  9. Excel VBA: 自动生成巡检报表并通过邮件定时发送

    目录 环境说明逻辑结构效果说明及截图①.安装SecureCRT②. 自动巡检脚本③. 数据检索并FTP传送④. 安装Excel 2013⑤. 安装Serv-U⑥. 自动生成图表并邮件发送 环境说明 系 ...

  10. android 基础学习笔记3

    1.XML解析  与  Json 解析 (文件读取一般较耗时 可将相应的解析做成方法  用线程调用) 一.XML解析  (pull解析)res/xml(资源文件 需用到Resources) Xml文本 ...