有关element-plus的transfer组件默认数据回填问题?

Question

<BaseModal width="640px" v-model="glGameModal.visible" :title="glGameModal.title"
    @defaultCancel="glGameCancel" @defaultConfirm="glGameConfirm">
    <el-row :gutter="10">
        <el-col :span="6">
            <el-input placeholder="请输入搜索内容" class="search-input"
                v-model="glGameModal.model.glGameSearchQuery" />
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="fetchData">搜索</el-button>
        </el-col>
    </el-row>
    <el-transfer
        v-model="glGameModal.model.glGameSelect"
        :data="glGameModal.model.glGameSearchList"
        :right-default-checked="initialSelectedKeys"
        :titles="['待选', '已选']"
        @change="handleTransferChange"
    >
        <template #default="{ option }">
            <span :title="option.label" class="custom-item"
                :class="{ disabled: isDisabled(option) }">
                {{ option.label }}
            </span>
        </template>
    </el-transfer>
</BaseModal>

import { reactive, computed, watch } from 'vue';
import { ElButton, ElInput, ElRow, ElCol, ElTransfer } from 'element-plus';
import BaseModal from '@/components/BaseModal.vue';

const glGameModal: any = reactive({
    title: "关联游戏",
    visible: false,
    model: {
        glGameSearchQuery: "",
        glGameSearchList: [],
        glGameInitSelect: [
            { key: 2, label: "选项2" },
            { key: 3, label: "选项3" },
            { key: 6, label: "选项6" },
        ],
        glGameSelect: [],
        rowInfo: {},
        gameList: [],
    },
});

const fetchData = async () => {
    const data = [
        { key: 1, label: "选项1" },
        { key: 2, label: "选项2" },
        { key: 3, label: "选项3" },
        { key: 4, label: "选项4" },
        { key: 5, label: "选项5" },
        { key: 6, label: "选项6" },
        { key: 7, label: "选项7" },
        { key: 8, label: "选项8" },
        { key: 9, label: "选项9" },
        { key: 10, label: "选项10" },
    ];
    glGameModal.model.glGameSearchList = data;
    glGameModal.model.glGameSearchList
        .filter((item) => item.label.includes(glGameModal.model.glGameSearchQuery))
        .map((item) => ({
            ...item,
            disabled: isDisabled(item),
        }));
};

const glGameCancel = () => {
    console.log("取消操作");
    glGameModal.visible = false;
};


const initialSelectedKeys = computed(() => {
    return glGameModal.model.glGameInitSelect.map((item) => item.key);
});

const glGameConfirm = () => {
    const params = {
        columnNo: glGameModal.model.rowInfo.columnNo,
        catalogueNo: "text",
        skuList: [],
    };
    glGameModal.visible = false;
};

const isDisabled = (item) => {
    return glGameModal.model.glGameSelect.some((selectItem) => selectItem.key === item.key);
};

const handleTransferChange = (newVal, oldVal, movedKeys) => {
    glGameModal.model.glGameSelect = newVal;
};

尝试多重方法无效，在手册DEMO上
:right-default-checked看到是用的是KEY，不太会用，大佬给指点下。

Answer 1

使用 :default-checked 属性而不是 :right-default-checked 来设置初始选中的键。
我把你的代码修改了一下

vue组件部分

<BaseModal width="640px" v-model="glGameModal.visible" :title="glGameModal.title"
    @defaultCancel="glGameCancel" @defaultConfirm="glGameConfirm">
    <el-row :gutter="10">
        <el-col :span="6">
            <el-input placeholder="请输入搜索内容" class="search-input"
                v-model="glGameModal.model.glGameSearchQuery" />
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="fetchData">搜索</el-button>
        </el-col>
    </el-row>
    <el-transfer
        v-model="glGameModal.model.glGameSelect"
        :data="glGameModal.model.glGameSearchList"
        :default-checked="initialSelectedKeys"
        :titles="['待选', '已选']"
        @change="handleTransferChange"
    >
        <template #default="{ option }">
            <span :title="option.label" class="custom-item"
                :class="{ disabled: isDisabled(option) }">
                {{ option.label }}
            </span>
        </template>
    </el-transfer>
</BaseModal>

JavaScript 部分

import { reactive, computed } from 'vue';
import { ElButton, ElInput, ElRow, ElCol, ElTransfer } from 'element-plus';
import BaseModal from '@/components/BaseModal.vue';

const glGameModal = reactive({
    title: "关联游戏",
    visible: false,
    model: {
        glGameSearchQuery: "",
        glGameSearchList: [],
        glGameInitSelect: [
            { key: 2, label: "选项2" },
            { key: 3, label: "选项3" },
            { key: 6, label: "选项6" },
        ],
        glGameSelect: [],
        rowInfo: {},
        gameList: [],
    },
});

const fetchData = async () => {
    const data = [
        { key: 1, label: "选项1" },
        { key: 2, label: "选项2" },
        { key: 3, label: "选项3" },
        { key: 4, label: "选项4" },
        { key: 5, label: "选项5" },
        { key: 6, label: "选项6" },
        { key: 7, label: "选项7" },
        { key: 8, label: "选项8" },
        { key: 9, label: "选项9" },
        { key: 10, label: "选项10" },
    ];
    glGameModal.model.glGameSearchList = data.filter((item) => item.label.includes(glGameModal.model.glGameSearchQuery));
};

const glGameCancel = () => {
    console.log("取消操作");
    glGameModal.visible = false;
};

const initialSelectedKeys = computed(() => {
    return glGameModal.model.glGameInitSelect.map((item) => item.key);
});

const glGameConfirm = () => {
    const params = {
        columnNo: glGameModal.model.rowInfo.columnNo,
        catalogueNo: "text",
        skuList: [],
    };
    glGameModal.visible = false;
};

const isDisabled = (item) => {
    return glGameModal.model.glGameSelect.some((selectItem) => selectItem.key === item.key);
};

const handleTransferChange = (newVal) => {
    glGameModal.model.glGameSelect = newVal;
};