opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.68k stars 266 forks source link

🐛 [Bug]: Cascader级联选择器在懒加载的情况+异步网络请求已选项的场景下下无法回显 #1869

Open banger0319 opened 3 months ago

banger0319 commented 3 months ago

Version

3.11.1

Vue Version

3.3.7

Link to minimal reproduction

<template>
  <tiny-dialog-box
    :visible="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <tiny-form :model="info">
      <tiny-form-item label="分组">
        <tiny-form-item label="设备分组">
          <tiny-cascader
            v-model="info.group"
            :props="groupProps"
          />
        </tiny-form-item>
      </tiny-form-item>
    </tiny-form>
    <template #footer>
      <tiny-button type="primary" @click="submit">提交</tiny-button>
    </template>
  </tiny-dialog-box>
</template>

<script setup>
  import { defineEmits, reactive } from 'vue';
  import {
    TinyDialogBox,
    TinyForm,
    TinyFormItem,
    TinyButton,
    TinyCascader,
  } from '@opentiny/vue';

  const store = mainStore();
  const info = reactive({
    group: [],
  });

   function setData(_id){
       //外部打开dialog时执行
       //模拟网络请求,拉去已保存的选项
       const {data} = fetch(_id)
       Object.assgin(info, data)
   }

  const groupProps = {
    lazy: true,
    value: '_id',
    label: 'name',
    checkStrictly: true,
    multiple: true,
    async lazyLoad(node, resolve) {
      if (node.level === 0) {
        //模拟网络请求
        const { data } = await fetch();
        resolve(data);
      } else {
        //模拟网络请求
        const { data } = await fetch()
        resolve(data);
      }
    },
  };

  function submit() {
       //网络请求保存所选项
  }

  defineExpose({
      setData
  })
</script>

Step to reproduce

选择一个二级及以上的选项后,保存选择结果,再次打开Cascader组件渲染并使用v-model绑定已选项,发现无法回显(使用options提前构建好选择项则可回显,但是由于业务需求只能选择懒加载)

What is expected

正常回显

What is actually happening

显示为空

What is your project name

TinyPro二开的后台管理系统

Any additional comments (optional)

在一个编辑基础信息的弹窗中,由于无法预估最终层级,与构建选项树的繁杂,则使用Cascader组件的懒加载功能对选择项进行加载。 选择完选择项后,会保存到数据库中,再次打开这个弹窗编辑时,希望能够将Cascader选择项在懒加载的模式下进行回显

Issues-translate-bot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: Cascader cascade selector cannot be echoed in the case of lazy loading + asynchronous network request has been selected.