一、语言:vue
二、实现效果:1、左侧框选择后在右侧有显示,右侧框内点击每一条后面的图标可以删除在右侧显示的,同时左侧的多选框取消选中。2、左侧有一个本地的模糊搜索框。3、完成组件效果,要求适配多处
三、HTML+css 样式
<div class="transfer-box">
//左边的部分
<div class="transfer-box-left">
<div class="box-title">
//左边的标题
<h5><span class="box-title-icon">*</span>{
{
render.leftTitle }}:</h5>
// 搜索框单写了一个组件
<search @search="handleSearch" />
<div class="box-left-check mt-10">
<div v-for="item in listData" :key="item.valueCode">
<input :id="item.valueCode" v-model="item.checked" type="checkbox" /><label
:for="item.valueCode"
>{
{
item.valueName }