ant-design-vue的tree组件在checkStrictly为true的情况下怎么定义checkedKeys

Z时代
2024-03-16
分类：IT

本人想实现自己的联动勾选逻辑，所以将checkStrictly设为true，关键代码如下

      <a-tree
        v-model:checkedKeys="checkedKeys"
        :check-strictly="true"      />

setup中的关键代码

    const checked = ref<string[]>([]);
    const checkedKeys = {
      checked: checked,
      halfChecked: [],
    };
    return {
      checkedKeys,    };

代码运行正常，但是会有如下警告：

[VueTypes warn]: oneOfType - provided value does not match any of the 2 passed-in validators: arrayOf - value "[object Object]" should be of type "Array" shape - "checked" property validation error:

arrayOf - value "[object Object]" should be of type "Array"

checked的类型错误，请问应该怎么定义让checked具有响应式？
试过用reactive定义checkedKeys，但是checked失去了响应式

    const checkedKeys = reactive({
      checked: [],
      halfChecked: [],
    });
//checkedKeys.checked = [1,2,3,4]; 没有效果
    return {
      checkedKeys,    };

回答：

试过以下几种定义方法都不行，我是没撤了

    //方法1
    const checkedKeys = reactive({
      checked: [],
      halfChecked: [],
    });
    //方法2
    const checked = ref<string[]>([]);
    const checkedKeys = reactive({
      checked: checked,
      halfChecked: [],
    });
    //方法3
    const checked = ref<string[]>([]);
    const checkedKeys = computed(() => {
      return {
        checked: checked.value,
        halfChecked: [],
      };    });