elemnet-plus el-cascader数据回显

<template>
  <div>
    <el-cascader
      :options="data.allList"
      :show-all-levels="false"
      v-model="form.ids"
      :props="{ checkStrictly: true }"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getCategoryList } from '@/api/category'; // 假设这是你的API请求

const data = reactive({
  allList: []
});

const form = reactive({
  ids: [] // 用于回显的值
});

onMounted(() => {
  getCategoryList().then(res => {
    if (res.code === 200) {
      data.allList = res.data;
      
      // 假设你要回显的值是 [3, 6]，即一级分类下的二级分类00
      form.ids = [3, 6];
    }
  });
});
</script>

json

{
  "msg": "操作成功",
  "code": 200,
  "data": [
    {
      "id": 3,
      "name": "一级分类",
      "children": [
        {
          "id": 6,
          "name": "二级分类00"
        },
        {
          "id": 9,
          "name": "二级分类11"
        }
      ]
    },
    {
      "id": 8,
      "name": "一级分类1",
      "children": []
    },
    {
      "id": 2,
      "name": "测试1",
      "children": [
        {
          "id": 7,
          "name": "分类001"
        }
      ]
    }
  ]
}