element-plus穿梭框transfer的调整

vue3的组件库element-plus内部包含一个穿梭框组组件

修改宽度和高度

这个组件没有提供修改高度和宽度的接口，默认的宽度和高度太小，内容稍微多一点就显示不出来了。

修改el-transfer height/width_el-transfer修改高度和宽度-CSDN博客

记录了修改穿梭框宽度的方法，但是有点语焉不详，这里补充一下。

在每一个单文件组件的<style>部分，插入以下代码

css 复制代码

.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类型中的几项映射到其他变量名。

比如说有一个变量类型

javascript 复制代码

export interface CompanyUser {
    user_id: number;
    department: string;
    title: string;
    work_email: string;
    work_name: string;
}

在定义穿梭框时可以这样

javascript 复制代码

<el-transfer
    v-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。当然其实也完全可以把这个函数放到其他位置，比如说在一个对话框内嵌一个穿梭框，然后把这个函数绑定到对话框的按钮上。