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%;
    }
}
相关推荐
盛夏绽放9 分钟前
Excel导出实战:从入门到精通 - 构建专业级数据报表的完整指南
开发语言·javascript·excel·有问必答
Mintopia11 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia14 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
挽淚38 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴39 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte42 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
今禾1 小时前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
南篱1 小时前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
coding随想1 小时前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我2 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js