首页 > 其他分享 >elemnet-plus 使用总结

elemnet-plus 使用总结

时间:2023-01-12 09:44:25浏览次数:56  
标签:总结 el const dayjs element plus import elemnet

1. el-date-picker设置起始周的日期 备注:如果添加 dayjs.en.weekStart = 2 不起作用需要检查是否添加了el-config-provider 语言设置 或者在app.vue中添加

<template>
  <el-config-provider :locale="locale">
    <el-date-picker v-model="value1" type="week" :format="valFormat" value-format="YYYY-MM-DD" placeholder="Pick a week"
      style="width: 100%" />
  </el-config-provider>
</template>
<script lang="ts" setup>
import { dayjs } from 'element-plus'
import zhCn from "element-plus/es/locale/lang/zh-cn";
const locale = ref(zhCn)
// @ts-ignore
dayjs.en.weekStart = 2

const value1 = ref('')
const valFormat = ref('YYYY/MM/DD')
watch(value1, (val) => {
  console.log(val)
  const startTime = val
  const endTime: string = dayjs(val).endOf('week').format('YYYY-MM-DD')
  valFormat.value = `${startTime} - ${endTime}`
  console.log(endTime)
})
</script>

 

 2. 修改 el-select,el-pagination,el-cascader 修改下拉框的icon

   2.1新建修改element-plus的默认样式文件 src/config/elementui.ts

//修改element默认引入
import { ElSelect,ElCascader } from 'element-plus'
import { CaretBottom } from '@element-plus/icons-vue'
ElSelect.props.suffixIcon.default = CaretBottom
console.log(ElCascader)
ElCascader!.components!.ArrowDown = CaretBottom

2.2 main.ts 中引入 import './config/elementui'

 

 

 此时需要加!感叹号,告诉TS您已检查并确定此元素存在

 

 

 

 

 

标签:总结,el,const,dayjs,element,plus,import,elemnet
From: https://www.cnblogs.com/zhaozhenzhen/p/16858333.html

相关文章

  • 网络流模板及易错点总结
    网络流模板及易错点总结一、最大流#include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;constintNN=300,MM=5e3+8,INF=0x7f7f7f7f;intn,m,......
  • Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
    转载请注明出处:1.Promise的then方法使用then方法是 Promise中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他......
  • 年终总结
    不知不觉又到年底了,马上要过年了,特此在今夜做一篇年终总结,来回顾今年历经之感悟。我一直在想,从月薪三千走到过万需要多久,刚来南京的时候,我头一次站在中华门外(第一家公司......
  • MyBatisPlus
    MyBatisPlus导入坐标SpringBoot并没有收录mybatisplus,所以需要自己导入坐标<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus......
  • MySQL配置安装或界面手动安装总结
    MySQL8安装避坑问题一:按照免安装版安装   1.链接官网:https://dev.mysql.com/downloads/mysql/  2.MySQL8目录      以管理员权限进入cmd  3.......
  • 总结几个常用的Git命令的使用方法
    1、Git的使用越来越广泛 现在很多的公司或者机构都在使用Git进行项目和代码的托管,Git有它自身的优势,很多人也喜欢使用Git。 我之前在公司最开始用的是SVN进行代码的托管,后面......
  • Python程序执行shell命令并关闭进程-总结
    需求说明linux下,有时候我们用Python3执行一个shell命令,这会开启一个进程。但是这个进程可能能不会主动关闭(比如Linux下的ping指令会一直持续执行),我们希望这个进程执行指......
  • javase知识点总结:初认java,数据类型与变量,运算符
    一.初识java1.初识Java的main方法main方法示例publicclassHelloWorld{publicstaticvoidmain(String[]args){System.out.println("Hello,world");......
  • vue3之 element-plus的动态图标
    Vue2中使用ElementUI的图标渲染是通过<iclass="el-icon-plus"></i>渲染Vue3中使用ElementPlus图标渲染是通过<el-icon><Plus/></el-icon>渲染所以在使用ElementU......
  • mysql从库无法正常回放主库的sql语句原因总结
    1.从库回放时报1062错误ERROR1062(23000):Duplicateentry'100-100'forkey'c1'违反唯一约束主库能通过,从库不能通过,要注意主从上表结构与索引结构信息是否完全......