Transfer自定义列表中清除已选择某个节点，节点状态不会改变，无论父节点还是子节点，除非全部清除

[chuxinone]

TuSimple/naive-ui version (版本)

2.34.4

Vue version (Vue 版本)

3.3.4

Browser and its version (浏览器及其版本)

1

System and its version (系统及其版本)

1

Node version (Node 版本)

1

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/os-theme/components/transfer

Reappearance steps (重现步骤)

Transfer自定义列表中清除已选择某个节点，节点状态不会改变，无论父节点还是子节点，除非全部清除。比如官网的demo种的自定义列表，全选后在右边已选中的节点中清掉某一个，左侧的节点状态不会变，除非清掉父节点

Expected results (期望的结果)

Transfer自定义列表中清除已选择某个节点，节点状态不会改变，无论父节点还是子节点，除非全部清除。比如官网的demo种的自定义列表，全选后在右边已选中的节点中清掉某一个，左侧的节点状态不会变，除非清掉父节点

Actual results (实际的结果)

Transfer自定义列表中清除已选择某个节点，节点状态不会改变，无论父节点还是子节点，除非全部清除。比如官网的demo种的自定义列表，全选后在右边已选中的节点中清掉某一个，左侧的节点状态不会变，除非清掉父节点

Remarks (补充说明)

Transfer自定义列表中清除已选择某个节点，节点状态不会改变，无论父节点还是子节点，除非全部清除。比如官网的demo种的自定义列表，全选后在右边已选中的节点中清掉某一个，左侧的节点状态不会变，除非清掉父节点

[XieZongChen]

未复现，需要提供稳定复现的最小沙盒环境

[chuxinone]

![20230608095134]（https://user-images.githubusercontent.com/46394163/244241861-df9bbd14-8f6b-46cc-8b5c-b808e14e4f09.gif）> 未复现，需要提供稳定复现的最小沙盒环境

代码如下：

import {h, nextTick, ref, useModel} from "vue"
import {NButton, NModal, NSpin, NTransfer, NTree} from "naive-ui";
import {ApiGetApiList,saveApiList} from "api/rule";
import {showMessageError,deCode} from "libs/tool";
import {useMessage} from "naive-ui"
export default {
emits: [ 'change','update:show'],
setup(props, {expose, attrs,emit}) {
const message = useMessage();
const loading = ref(false);
const show = useModel(props, 'show');
const group_id = useModel(props,'group_id');
let options = ref([]);
const valueRef = ref([]);
const flattenTree = (list)=> {
const result= []
function flatten (_list= []) {
_list.forEach((item) => {
result.push(item)
flatten(item.children)
})
}
flatten(list)
return result
}

    const onApiGetApiList = ()=>{
        valueRef.value = [];
        options.value = [];
        loading.value = true;
        ApiGetApiList({gid:group_id.value})
            .then(result=>{
                if(result.hasOwnProperty('code') && result.code===200){
                  const data = deCode(result.data,'object');
                  options.value = data.group_api;
                   valueRef.value = data.activi_api;
                } else throw {message:result.message||'获取数据失败'};
                console.log("数据",options.value)
            })
            .catch(err=>{
                console.error(err);
                showMessageError("获取数据失败")
            })
            .finally(()=>loading.value=false);
    }

    return () => h(NModal, {
            maskClosable: false,
            show: show.value,
            preset: "card",
            title: props.title,
            class: 'rule-modal',
            size: 'huge',
            style: {
                width: "800px",
            },
            bordered: false,
            closable:!loading.value,
            closeOnEsc:!loading.value,
            onUpdateShow: (e) => show.value = e,
            onAfterEnter:()=>{
                nextTick(()=>onApiGetApiList())
            },
            onAfterLeave:()=>{
                console.log("隐藏了")
            }
        }
        , {
            default: () => h(NSpin, {
                show: loading.value
            }, {
                default: () => [
                    h('div',{style:{height:'500px'}},{default:()=>[h(NTransfer, {
                            options:flattenTree(options.value),
                            class:'api-transfer',
                            sourceFilterPlaceholder:'请输入名称检索',
                            sourceFilterable:false,
                            sourceTitle:'你的所有权限',
                            targetTitle:'用户组权限',
                            virtualScroll:true,
                            value:valueRef.value,
                            onUpdateValue:(e)=>{
                                console.log("值发生了改变",e);
                                valueRef.value=e;
                            },
                            renderSourceList:({onCheck, pattern})=>{
                                return h(NTree, {
                                    style: "margin: 0 4px;",
                                    accordion:true,
                                    keyField: "value",
                                    checkable: true,
                                    cascade:true,
                                    selectable: true,
                                    blockLine: true,
                                    checkOnClick: true,
                                    data: options.value,
                                    pattern,
                                    checkedKeys: valueRef.value,
                                    defaultSelectedKeys:valueRef.value,
                                    onUpdateCheckedKeys: (checkedKeys) => {
                                        console.log("选中",checkedKeys)
                                        onCheck(checkedKeys);
                                    },
                                    onUpdateSelectedKeys:(checkedKeys)=>{
                                        console.log("部分选中",checkedKeys)
                                        onCheck(checkedKeys);
                                    }
                                });
                            }
                        }, {})]}),
                    h('div',{
                        style:{
                            padding:'20px 0 5px',
                            textAlign:'right'
                        }
                    },{
                        default:()=>[
                            h(NButton,{
                                type:'info',
                                disabled:valueRef.value?.length<1,
                                onClick:()=>{
                                    loading.value=true;
                                    setTimeout(()=>{
                                        saveApiList({gid: group_id.value,api:valueRef.value})
                                            .then(result=>{
                                                if(!result.hasOwnProperty('code') || result.code!==200)throw {message:result.message || '修改失败'}
                                                else{
                                                    message.success(result.message || '保存成功');
                                                    emit('change',{group_id:group_id.value,type:'api',count:result?.data?.count||0});
                                                    show.value = false;
                                                }
                                            })
                                            .catch(err => {
                                                console.log("出现了错误")
                                                showMessageError(err)
                                            })
                                            .finally(()=>loading.value=false)
                                    },1000)
                                }
                            },{default:()=>loading.value?'正在更新数据':'保 存'})
                        ]
                    })
                ]
            })
        });
},
props: {
    show: {type: Boolean, default: false},
    group_id:{type:[Number],default:0},
    title: {type: String, default: '接口权限管理'}
},

}

[chuxinone]

未复现，需要提供稳定复现的最小沙盒环境

我给你录制了一个视频，里面包含了数据，代码就是上面贴的代码，包

Video_23-06-08_18-41-58.mp4

含重现过程

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem