element-ui 组件 el-calendar 农历显示问题
一、官方文档: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 农历显示问题的更多相关文章
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- ReactNative Android之原生UI组件动态addView不显示问题解决
ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com ...
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- Element UI组件说明
-<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...
- vue问题五:element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element ui改写实现两棵树
使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
随机推荐
- Miniio安装登陆密码报错问题,注意检查区分带小写!
------------恢复内容开始------------ #创建minio专用文件目录mkdir -p /app/minio/datamkdir -p /app/minio/configchmod ...
- UML--->用例图梳理
用例图梳理 概述 用例图主要用来描述"用户.需求.系统功能单元"之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. 用例图的主要目的是帮助开发团队以一种可视化的方式理解系 ...
- sublime3 docblocker 注释插件的配置
sublime3 docblocker插件定制自己的注释,配置步骤 DocBlockr很好用,不仅仅可以自动生成注释,还可以手动编辑注释的格式. 安装方法: Cmd+Shift+P -> In ...
- vue计算属性和方法的区别
计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...
- orcle导入大数据文件
0,创建ctl文件 内容为 OPTIONS (skip=0) LOAD DATA CHARACTERSET 'UTF8' INFILE 'F:\anhui_data\20180814\shangh ...
- C++使用类调用CUDA核函数
正如CUDA C所称,CUDA对C语言进行了很好的扩展,直接使用C语言可以非常简单方便的调用CUDA核函数.但是当想使用C++的类成员函数直接调用核函数是不可行的,第一,核函数不能作为类的成员函数,第 ...
- HDU_3183_RMQ
http://acm.hdu.edu.cn/submit.php?pid=3183 初探rmq,这道题看了题解还是写了好久.原因是rmq处理字符串时没有自己写min函数,导致把返回的字符当成下标处理了 ...
- ARTS Week 5
Nov 25, 2019 ~ Dec 1, 2019 Algorithm 深度优先搜索--书籍分配 题目描述:有b1-b5五本书,要分配给五个学生,分别是a1-a5.但每个学生都有其喜欢的书,要检查是 ...
- Excel VBA: 自动生成巡检报表并通过邮件定时发送
目录 环境说明逻辑结构效果说明及截图①.安装SecureCRT②. 自动巡检脚本③. 数据检索并FTP传送④. 安装Excel 2013⑤. 安装Serv-U⑥. 自动生成图表并邮件发送 环境说明 系 ...
- android 基础学习笔记3
1.XML解析 与 Json 解析 (文件读取一般较耗时 可将相应的解析做成方法 用线程调用) 一.XML解析 (pull解析)res/xml(资源文件 需用到Resources) Xml文本 ...