首页element-plus时间选择器插槽

element-plus时间选择器插槽

时间: 2025-04-22 13:49:36 浏览: 21

### Element Plus 时间选择器插槽使用方法在 `el-time-picker` 组件中，可以利用作用域插槽来自定义时间选项的内容和样式。通过这种方式，能够更灵活地控制显示效果。 #### 基本用法为了自定义时间项的展示方式，可以在 `<template v-slot:suffix>` 或者其他支持的作用域插槽内编写模板代码[^1]： ```html <template> <div class="demo"> <el-time-picker v-model="time" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间">  <template #default="{ hours, minutes, seconds, active }"> <span style="color:red">{{ `${hours}:${minutes}:${seconds}` }}</span> <span v-if="active"> (当前高亮)</span> </template> </el-time-picker> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const time = ref('') </script> ``` 上述例子展示了如何通过默认插槽来修改每一个时间条目的外观，在这里红色字体表示具体的时间，并且当某个时间段被激活时会额外提示 "(当前高亮)"[^2]。对于更为复杂的场景，则可能需要用到更多种类的插槽，比如前缀(`prefix`)、后缀(`suffix`)等特殊位置上的内容定制化需求也可以得到满足。

阅读全文