element-plus组件问题汇总

element-plus组件问题汇总

一、el-select

1. 下拉选项实现添加全部
问题描述:value为空时,select框中不显示全部选项,但是下拉列表中全部显示是勾选状态
图片:
解决办法:添加 :empty-values="[null, undefined]" :value-on-clear="null"
javascript 复制代码
<el-select clearable v-model="formData.systemModule" placeholder="请选择" :empty-values="[null, undefined]" :value-on-clear="null" class="customSelect">
    <el-option label="全部" value="" />
    <el-option v-for="item in systemModuleOptions" :key="item" :label="item" :value="item" />
</el-select>

二、el-date-picker

1. 修改前缀图标
代码:
javascript 复制代码
// 模版中
<el-date-picker
	v-model="formData.startTime"
    type="date"
    placeholder="选择日期时间"
    :prefix-icon="customPrefix"
/>

// 方法
<script setup lang="ts">
	import { ref, h, shallowRef } from "vue";
	const customPrefix = shallowRef({
  		render() {
    		return h('span', { class: 'mayDateIcon' })
  		},
	})
</script>

// 样式
::v-deep {
    .mayDateIcon {
        display: inline-block;
        width: 17px;
        height: 17px;
        background: url(../../assets/images/date.png) no-repeat; // 替换的图片地址
        background-size: 100% 100%;
    }
}
相关推荐
Senar21 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
前端snow3 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试3 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog3 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
fxshy4 小时前
ai聊天流式响应,阻塞式和流式响应 nginx遇到的坑
运维·javascript·nginx