标签：... recursive 递归 means 如下 record 报错 words slots

一. 场景

UI框架为and-design-vue

报错原话如下：

大概意思是：超过最大递归更新数。 这意味着你有一个反应性效果，它正在改变自己的依赖项，从而递归地触发自己。 可能的来源包括组件模板、渲染函数、更新的钩子或观察者源函数。

情况：拿服务器返回的数据在table标签里面进行呈现，该数据比较大。如下图：还没有截完…

二. 解决办法

通过slots属性配合文字提示标签tooltip进行显示

// js部分
const columns = [
  {
    title: '替换词',
    dataIndex: 'words',
    width: '40%',
    slots: { customRender: 'words' },
    // ellipsis: true, // 超过宽度后以省略号显示
  },
]

// html部分
<a-table
  bordered
  :columns="dynamicColumns"
  :data-source="dynamicList"
  :scroll="{ x: 0, y: 400 }"
  :pagination="false"
  :rowKey="(record) => record.creativeWordId"
  :loading="false"
>
  <template #words="{ record }">
	<a-tooltip placement="left">
	  <span>{{ record.words }}</span>
	  <template #title>{{ record.words }}</template>
	</a-tooltip>
  </template>
</a-table>

完美的解决问题，就没有报错了，如下图：

（完）

标签：...,recursive,递归,means,如下,record,报错,words,slots
来源： https://blog.csdn.net/Yukinoshita_kino/article/details/121802656

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。