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-pickerv-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%;}
}