vue+element-ui 中transfer穿梭框功能

最新推荐文章于 2024-08-13 18:02:46 发布

qq_40697804

最新推荐文章于 2024-08-13 18:02:46 发布

阅读量9.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_40697804/article/details/100013567

版权

本文详细介绍了如何在Vue项目中利用Element-UI组件库的Transfer穿梭框功能，结合HTML和CSS样式代码，实现下拉框选择及搜索功能。通过JS逻辑处理，实现了数据双向绑定和筛选显示，提供了完整的实现步骤和关键代码片段。

摘要由CSDN通过智能技术生成

下拉框选择搜索html

<div class="widget box">
			<div class="widget-header">
				<h4><i class="el-icon-tickets"></i>学生批量调班</h4>
			</div>
			<el-select v-model="dCValue" placeholder="请选择调出班级" class="sjw dc" @change="changeChuClass" @focus="chuPanDeng">
			    <el-option
			      v-for="item in chuOptions"
			      :key="item.class_id"
			      :label="item.class_name"
			      :value="item.class_id"
			      v-show="item.show">
			    </el-option>
			</el-select>
			<el-select v-model="dRValue" placeholder="请选择调入班级" class="sjw dr" @change="changeRuClass" @focus="ruPanDeng">
			    <el-option
			      v-for="item in ruOptions"
			      :key="item.class_id"
			      :label="item.class_name"
			      :value="item.class_id"
			      v-show="item.show">
			    </el-option>
			</el-select>
			<div class="widget-content">
				<el-transfer
					:titles="['调出班级','调入班级']"
				    v-model="value2"
				    :data="data"