element-plus组件问题汇总

最新推荐文章于 2024-09-13 14:26:42 发布

一万种可能-码农

最新推荐文章于 2024-09-13 14:26:42 发布

阅读量645

点赞数 1

分类专栏： vue组件库 vue常见问题文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/xiaoxian_xian/article/details/142176361

版权

vue常见问题同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue组件库

5 篇文章 0 订阅

订阅专栏

element-plus组件问题汇总

一、el-select

1. 下拉选项实现添加全部

问题描述：value为空时，select框中不显示全部选项，但是下拉列表中全部显示是勾选状态

图片：

在这里插入图片描述

解决办法：添加 :empty-values=“[null, undefined]” :value-on-clear=“null”

<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. 修改前缀图标

代码：

// 模版中
<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%;
    }
}