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%;
    }
}
相关推荐
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro