vue3 elementplus穿梭框头部

在Vue3中，ElementPlus库提供了丰富的UI组件，包括穿梭框（也称为拖拽选择器，Draggable Select）。Element Plus的穿梭框头部通常包含一些控件，如筛选条件输入框、操作按钮等，用于用户交互和自定义选项展示。

Element Plus的`<el-dragger>`组件有一个`header`属性，你可以在这里放置HTML元素，例如设置文本标签、输入框，或者其他组件。下面是一个简单的例子：

<template>
  <div>
    <el-dragger :data="items" :options="{ multiple: true, max: 3 }" v-model="selectedItems">
      <div slot="header">头部内容</div>
      <!-- 或者添加一个自定义头部 -->
      <template #header>
        <span>筛选:</span>
        <el-input placeholder="请输入过滤条件"></el-input>
        <button type="button" @click="handleClear">清空</button>
      </template>
      <ul>
        <li v-for="(item, index) in items" :key="index" draggable="true">{{ item.name }}</li>
      </ul>
    </el-dragger>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([{ name: 'Option 1' }, { name: 'Option 2' }, ...]); // 你的数据源
const selectedItems = ref([]);
function handleClear() {
  selectedItems.value = [];
}
</script>

在这个例子中，头部区域包含了筛选输入框和一个清空按钮，当用户点击“清空”按钮时，会清除当前选中的项目。