项目背景:VUE + 基于elementUI 的 Transfer 组件.
实现功能穿梭框 增加按钮
穿梭框 编辑字段
穿梭框 输入框自动获取焦点
穿梭框 回车确认修改内容
穿梭框 失焦提示未提交内容
1. 穿梭框增加按钮elementUI 的 Transfer 组件，UI是不分左右的。需求是只有穿梭到右边的字段才有编辑的操作。找遍天也没有看到有slot，或者暴露区分左右的钩子。大胆的说 【render-content 自定义数据项渲染函数】是不满足的。
解决思路利用穿梭框已穿梭字段数组，在HTML元素写一个v-if。控制这个按钮的隐藏与显示。
<el-transfer filterable :titles="transferTitles" :filter-method="filterMethod" v-model="selectSourceFileArr" :data="sourceFileData" @change="handleChangeFileTransfer" > <span v-if="selectSourceFileArr.includes(option.key)" // 关键代码！！！！ ></span> </el-transfer> 运行效果 2. 穿梭框编辑字段增加了按钮只是一个开关，需求是点击小图标可以修改字段名称。用户可以输入，那就是input标签。这个小图标控制input的显示与隐藏
解决方案小图标绑定点击事件 @click.stop.prevent="rename(option)"这里一定要注意阻止冒泡噢，不然你可能永远也触发不了这个事件。v-show="option.showInput" 这个字段后端是不会提供的，需要在接口数据回来自己forEach加上去切记哦~~~
filterable :titles="transferTitles" :filter-method="filterMethod" v-model="selectSourceFileArr" :data="sourceFileData" @change="handleChangeFileTransfer" > <span> <span v-show="!option.showInput"> {{ option.label }}</span> <span v-show="option.showInput"> // 控制是否显示input <el-input v-model="option.label"></el-input> <i @click.stop.prevent="closeInput(option)"></i> // 取消修改内容 <i @click.stop.prevent="checkInput(option)"></i>// 保存修改内容 </span> <span v-if="selectSourceFileArr.includes(option.key)" @click.stop.prevent="rename(option)" // 关键代码！！！！！！！！ ></span> </span> </el-transfer> 运行效果 3. 穿梭框 输入框自动获取焦点需求是点击小图标，显示input，但是它的焦点是不在这个输入框上面的。
解决方案自动获取焦点少不了focus(),input是循环渲染出来的，不可直接写ref,那就用赋值变量好啦~<el-input :ref='option.id'></el-input>。上面点击小图标不是有一个@click.stop.prevent="rename(option)"直接写在rename方法里面就行。效果就不放了，亲测有效！
//将输入框自动获取焦点 option 为入参 this.$nextTick(() => { this.$refs[option.id].focus() }) 4. 回车确认修改内容单独把这个回车事件都拿出来写，是不是有点？
input + vue 监听回车事件 @keyup.13/@keyup.enter
el-input + vue 监听回车事件 @keyup.13.native/@keyup.enter.native
5.穿梭框 失焦提示未提交内容这个拿出写，我承认是有点那啥了，但是我的穿梭框就是有这玩意。又回车又失焦又。。。
就一个@blur打扰了，呜呜呜呜
这几个方法其实不仅仅用在穿梭框上，虽然挺简单的，但有时候一时没有想到也挺闹心的。比如第一个如何在已有的穿梭框上多加一个小icon，而且只有右边有。一不留神el-input上面写@keyup.enter 没有写 .native。都是一些非常细节的小问题，你看一遍下一回就留意了!