V-for and slot-scoped报错问题

此场景是为了用v-for动态渲染表格的slot

可能会这么写

<a-table><span v-for="(item, index) in header" :key="index" :slot="item.dataIndex" slot-scope="text"  >{{ text }}</span>
</a-table>

但是这样子会报错，因为v-for和slot-scope在同一级

Ambiguous combined usage of slot-scope and v-for on (v-for takes higher priority). Use a wrapper < template> for the scoped slot to make it clearer.

提示在外边包一层< template>，于是你可能改成下面这样，但是也会报错

<a-table><template v-for="(item, index) in header" :key="index"><span :slot="item.dataIndex" slot-scope="text"  >{{ text }}</span></template>
</a-table>

< template> cannot be keyed. Place the key on real elements instead.

提示< template>template不能写key，即使没有这个错，表格数据也不会渲染出来，因为这一层没有slot，应该说slot应该是放最外面，同时把:key放里面

改成如下

<a-table><template v-for="(item, index) in header" :slot="item.dataIndex" slot-scope="text"><span :key="index">{{ text }}</span></template>
</a-table>

以上解决问题

有个slot没有渲染的问题

         <template v-for="(slotname, idx) in ['status', 'sub_account_status']" :slot="slotname" slot-scope="text" ><span :key="idx"><a-tag v-if="text === '正常'" color="blue">{{ text }}</a-tag><a-tag v-else color="red">{{ text }}</a-tag></span></template><!-- 包名称、关联账号 --><template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" ><span :key="idx"><a-tooltip placement="top" ><template slot="title"><span v-for="(item, index) in text" :key="index">{{ item }}<br/></span></template><div class="tableHidden"><a-tag v-for="(item, index) in text" :key="index">{{ item }} </a-tag></div></a-tooltip></span></template>

好像是因为2个v-for="(slotname, idx)"里的slotname名字一样了，对的，就是取的临时变量名，修改成不一样的就好了，神奇

        <template v-for="(name, idx) in ['status', 'sub_account_status']" :slot="name" slot-scope="text" >// 上面那个name<span :key="idx">。。。</span></template><!-- 包名称、关联账号 --><template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" ><span :key="idx">。。。</a-tooltip></span></template>

V-for and slot-scoped报错问题相关推荐

AIX系统中rmdev删除设备或cfgmgr -v 时无法保存或报错，hd5的问题
现象如下: # rmdev -Rdl et0 et0 deleted rmdev: 0514-508 Cannot save the base customized information ...
装detectron2报错：nvcc fatal : No input files specified； use option --help for more information
装 detectron2[1],开头遇到 ninja 的报错,参考 [2],关掉 ninja.然后又报了 nvcc 的错: × python setup.py develop did not run ...
vivado报错：USF-XSim-62的常见解决办法
我们在使用vivado的时候,做完了一些模块以后,进行仿真的时候会出现以下错误: [USF-XSim-62] 'compile' step failed with error(s). Please c ...
appium-doctor报错--xxxx cannot be found解决办法和文件下载地址
如果您看完我的博客,解决了您的问题,麻烦关注下我呗~不定期更新软件测试内容一.解决opencv4nodejs can not found 1.安装cmake并配置环境变量环境:Windows 64 ...
云原生 | Kubernetes - k8s集群搭建（kubeadm）（持续收录报错中）
目录前置 1.实现效果 2.环境准备 3.系统初始化关闭防火墙关闭 selinux 关闭 swap 主机名配置hosts 将桥接的 IPv4 流量传递到 iptables 的链时间同步部署 ...
手动安装pyhanlp【遇坑报错全程合集和解说】
手动安装pyhanlp 之前无论用什么版本的python,使用conda或者pip下载安装pyhanlp老出错.决定手动进行安装. 步骤一: 安装pyhanlp之前看了是得先安装jpype,方法: 方 ...
webpack 3/4踩坑，我太难了，从安装、卸载、到使用，各相应的版本号，sass-loader报错-版本的原因，webpack -v 不识别，没卸载干净...
-先说卸载: wabpack@4对应的每个插件的版本号都在最后 1 全局安装的话,npm uninstall webpack -g 有时候并不能卸载干净, 2 webpack -v 可判断是否安装成 ...
webpack -v 指令报错
(1)webpack 安装完成以后报错, One CLI for webpack must be installed. These are recommended choices, delivered ...
iOS报错：linker command failed with exit code 1 (use -v to see invocation) 问题解决方式之一
iOS报错:linker command failed with exit code 1 (use -v to see invocation) 问题解决方式之一参考文章: (1)iOS报错:link ...
Postgresql逻辑复制报错could not start WAL streaming: ERROR: replication slot “x“is active for PID xxx
先看日志错误: #发布端报错如下: 2022-04-01 10:18:23.812 CST,"postgres","hank",4666,"10.4. ...

V-for and slot-scoped报错问题

V-for and slot-scoped报错问题相关推荐

最新文章

热门文章