element-plus [Component] eltable组件动态添加插槽 警告:Maximum recursive updates exceeded in component < ElScrollbar>

g9icjywg  于 5个月前  发布在  其他
关注(0)|答案(8)|浏览(70)

Bug Type: Component

Environment

  • Vue Version: 3.2.41
  • Element Plus Version: 2.2.36
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
  • Build Tool: Vite

Reproduction

  • el-table
  • el-table-column
  • el-scrollbar

Element Plus Playground

Steps to reproduce

有动态插槽的情况下,更新table的data后,有警告

What is Expected?

无警告

What is actually happening?

Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Additional comments

(empty)

pod7payv

pod7payv1#

I am using el-select to generate this warning

s8vozzvw

s8vozzvw2#

I am using el-select to generate this warning
eg:

<template v-for="item in formList" :key="item">
        <template v-if="item.type === 'select'">
          <el-select>
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </template>
        </template>
mec1mxoz

mec1mxoz3#

I also encountered this error when i using el-table + el-select .
But i can't reproduce this warning on condesanbox.

ecbunoof

ecbunoof4#

I also encountered this error when i using Transition + el-select .
And I think it might have something to do with Vite.

w51jfk4q

w51jfk4q5#

I am using el-select to generate this warning

I wrapped the el-select again and it worked surprisingly well...

2hh7jdfx

2hh7jdfx6#

@wjw-gavin 我也遇到了,你是怎么解决的?

fdbelqdn

fdbelqdn7#

@wjw-gavin 我也遇到了,你是怎么解决的?

我直接使用会报这个警告,但是我二次封装 el-select 后就莫名的好了,不报警告了。

x8goxv8g

x8goxv8g8#

@wjw-gavin 我也遇到了,你是怎么解决的?

我直接使用会报这个警告,但是我二次封装 el-select 后就莫名的好了,不报警告了。

我尝试了,确实可以,一开始排查实在找不到哪里写的有问题,最终排查到到el-option, 只要用了v-for循环就会报错误(直接写option选项是正常的),综合其他人的描述,应该是在组合使用组件,且多层循环的情况下发生。

以下简单处理了二次封装:

<template>
  <el-select
    v-model="data"
    placeholder="请选择"
  >
    <el-option
      v-for="i in 12"
      :key="i"
      :label="i"
      :value="i"
    />
  </el-select>
</template>

<script  setup lang='ts' name='secondSelect'>
import { useVModel } from '@vueuse/core'
const props = defineProps<{
  modelValue:string
}>()
const emits = defineEmits(['update:modelValue'])
const data = useVModel(props, 'modelValue', emits)
</script>

相关问题