element-plus穿梭框transfer的调整
vue3的组件库element-plus内部包含一个穿梭框组组件
Transfer 穿梭框 | Element Plus
修改宽度和高度
这个组件没有提供修改高度和宽度的接口，默认的宽度和高度太小，内容稍微多一点就显示不出来了。
修改el-transfer height/width_el-transfer修改高度和宽度-CSDN博客
记录了修改穿梭框宽度的方法，但是有点语焉不详，这里补充一下。
在每一个单文件组件的<style>部分，插入以下代码
.el-transfer {--el-transfer-panel-width: 450px;--el-transfer-panel-body-height: 400px;
}就可以修改穿梭框的宽度和高度
数据的对应关系
穿梭框组件对应的数据是data，在定义组件时通过v-bind或者缩写:来指定数据，这个数据是ref的Array
默认情况下，data对应的数据应该是Array<TransferPropsAlias>类型，而TransferPropsAlias内部包含3项：key、label、disabled
默认情况下，穿梭框显示的是label。如果disabled定义为true，则不可勾选
穿梭框右侧对应的数据是v-model，在定义组件时指定，这个数据是ref的Array。其数据类型是Array<typeof key>，也就是data的key组成的数组。
穿梭框初始化后，data输入，v-model是一个空数组。此时穿梭框左侧列出data中的数据，右侧为空。当通过穿梭框把左侧的数据向右侧移动时，内部其实只是把左侧对应项的key复制到右侧v-model的Array<typeof key>中。左侧显示会减少，但是实际上data是不变的，想要修改data必须要等到其他事件发生，比如说定义的另外一个按钮被点击触发一个函数，该函数读取data和v-model并进行操作。
TransferPropsAlias类型太过简单，恐怕无法满足使用需求，那么可以使用props选项把TransferPropsAlias类型中的几项映射到其他变量名。
比如说有一个变量类型
export interface CompanyUser {user_id: number;department: string;title: string;work_email: string;work_name: string;
}在定义穿梭框时可以这样
<el-transferv-model="removedMembersRef"style="text-align: left; display: inline-block":titles="['组内用户', '将要移除']":button-texts="['不再移除', '准备移除']":format="{noChecked: '${total}',hasChecked: '${checked}/${total}',}":props="{key: 'user_id',}"v-bind:data="membersListRef"@change="handleChange"
><template #default="{ option }"><span>{{ option.work_email }} - {{ option.work_name }}</span></template><template #left-footer><el-button class="transfer-footer" size="small">Operation</el-button></template><template #right-footer><el-button class="transfer-footer" size="small">Operation</el-button></template>
</el-transfer>data绑定的memberListRef的数据类型是ref<Array<CompanyUser>>()，可以看到CompanyUser类型内部没有key这项
在props里定义key映射到user_id上，这样v-model所绑定的removedMembersRef的数据类型就变成了Array<typeof user_id>也就是Array<number>
在显示的部分，通过v-slot:default插槽设定显示模板内容，但是穿梭框仅支持{option}这么一种写法，不可以采用其他写法。比如说改个名字采用{ slotProp }的写法，会提示slotProp is undefined
用了props以后，此时option的数据类型就成了CompanyUser，所以就可以使用option.work_email和option.work_name
而在v-slot:left-footer和v-slot:right-footer插槽里可以自定义一些其他东西，比如说按钮，并且在按钮关联回调函数，通过回调函数来操作data和v-model。当然其实也完全可以把这个函数放到其他位置，比如说在一个对话框内嵌一个穿梭框，然后把这个函数绑定到对话框的按钮上。