Using nuxt and elementui el-dialog pop-up may cause bugs

[xu zhi bin]

If pop-up is not used, it is normal. Below are a normal and an abnormal appearance.

[Keerthikaran Venkatachalam]

Hi Xu zhi bin,

We are unable to replicate the issue on our end. We have prepared a sample based on your requirements. It is working fine. I have attached the sample for reference.

Sample Link: https://stackblitz.com/edit/zwbb5e-ismrwt?file=src%2FApp.vue

If you still facing issue, could you please share the issue's replicable sample or replicate the issue in our sample with replication steps and a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[xu zhi bin]

I have tested it out. If two pages are displayed, there will be an error. Take a look at the code I sent

Attachment: testSyncfusion1_83e232ed.zip

[Keerthikaran Venkatachalam]

Hi Xu zhi bin,

We have reviewed your sample and noticed that you have set the same ID for both QueryBuilder. To resolve this issue, please set individual IDs for each QueryBuilder. Please refer to the below code snippet and sample.

  <ejs-querybuilder :id="id" :headerTemplate="'headerTemplate'" allowValidation :showButtons="{   groupInsert: true, groupDelete: false }"  ref="queryBuilder"  :rule="importRules" width="100%"  >

    <template v-slot:headerTemplate="{data}">

      <el-button  @click="btnAddRule">添加条件</el-button>

    </template>

    <e-columns>

      <e-column  v-for="item in columns" :key="item.field" :field='item.field' :label='item.label' :type='item.type ?item.type:"string"' :format="item.format" :operators="item.operators ?item.operators:getOperators(item.type)" />

    </e-columns>

  </ejs-querybuilder>

………….

props:{

    id: {

      type: String,

      default: () => ""

    },

  },

……………..

    <el-dialog :append-to-body="true"

               :visible.sync="isShowDialog"

               width="80%"

    >

  <span>

   <el-link type="primary" @click="isShow=true">show</el-link>

  <el-dialog width="90%" :append-to-body="true" :visible.sync="isShow" title="项目详情">

    <adl-advanced-search id="querybuilder1" v-show="isShow" :columns="columns"></adl-advanced-search>

  </el-dialog>

</span>

    </el-dialog>

    <adl-advanced-search id="querybuilder" :columns="columns"></adl-advanced-search>

  </div>

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: QueryBuilder_67e541fb.zip