Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用 Tree 的搜索,如何初始化搜索关键字? #1057

Closed
M69W opened this issue Aug 11, 2021 · 0 comments
Closed

使用 Tree 的搜索,如何初始化搜索关键字? #1057

M69W opened this issue Aug 11, 2021 · 0 comments

Comments

@M69W
Copy link

M69W commented Aug 11, 2021

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭

  • 已阅读 文档.
  • 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
  • 已在 Issues 中搜索了相关的关键词
  • 不是 ant design vue 组件库的 Bug, 不确定!

描述 Bug

使用tree ,带搜索框,如何对搜索框初始值?
例如在弹窗中使用 tree(开启搜索功能), 关闭 弹窗后,再次打开,搜索框还保留之前输入的关键字。

复现 Bug

https://vvbin.cn/next/#/comp/tree/editTree
或以下代码重现现象。
替换完整版demo 文件: src/views/demo/comp/modal/Modal4.vue
Modal4.zip

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="Modal Title"
    @visible-change="handleVisibleChange"
  >
    <!-- <BasicForm @register="registerForm" :model="model" /> -->
    <BasicTree title="工具栏使用" toolbar checkable search :treeData="treeData" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  // import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { BasicTree } from '/@/components/Tree/index';
  import { treeData } from '/@/views/demo/tree/data';
  // const schemas: FormSchema[] = [
  //   {
  //     field: 'field1',
  //     component: 'Input',
  //     label: '字段1',
  //     colProps: {
  //       span: 24,
  //     },
  //     defaultValue: '111',
  //   },
  //   {
  //     field: 'field2',
  //     component: 'Input',
  //     label: '字段2',
  //     colProps: {
  //       span: 24,
  //     },
  //   },
  // ];
  export default defineComponent({
    components: { BasicModal, BasicTree },
    props: {
      userData: { type: Object },
    },
    setup(props) {
      const modelRef = ref({});
      // const [
      //   registerForm,
      //   {
      //     // setFieldsValue,
      //     // setProps
      //   },
      // ] = useForm({
      //   labelWidth: 120,
      //   schemas,
      //   showActionButtonGroup: false,
      //   actionColOptions: {
      //     span: 24,
      //   },
      // });

      const [register] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        console.log('Data Received', data);
        // 方式1;
        // setFieldsValue({
        //   field2: data.data,
        //   field1: data.info,
        // });

        // // 方式2
        modelRef.value = { field2: data.data, field1: data.info };

        // setProps({
        //   model:{ field2: data.data, field1: data.info }
        // })
      }

      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }

      return { treeData, register, model: modelRef, handleVisibleChange };
    },
  });
</script>

替换后,本地:http://localhost:3100/#/comp/modal ,打开弹窗4

@github-actions github-actions bot locked and limited conversation to collaborators Sep 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant