前言

在周末的时候更新了WebStorm的2022.03版本,更新过后就发现了之前写的项目里面会有label 不是 slot 的有效值。预期值: 的警告爆出来,在百度以及google的搜索中并没有找到相关的问题,于是便在官网发起了问题求助!

正文

我的代码是这样的

 <el-descriptions class="margin-top" :title="'订单'+drawerData.order+'详情'" :column="1" border>
            <template slot="extra">
              <el-button type="danger" size="small">发起工单</el-button>
            </template>
            <el-descriptions-item :labelStyle="{'width': '15%'}">
              <template slot="label">
                订单号
              </template>
              <span @click="copy(drawerData.order)">{{ drawerData.order }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商品名称
              </template>
              {{ drawerData.name }}
            </el-descriptions-item>
      </el-descriptions>

然后 控制台呢就报了一个label 不是 slot 的有效值。预期值: 的警告,具体的就是图里这个了

这个警告我在IDE的设置里面并没有找到相关的设置,刚开始我以为是什么插件没有兼容2022.03版本导致的,于是便把一些相关的插件卸载了,发现问题还是一样的存在,所以我在官网提交了问题。

根据官网给我的答复就是:IDE是解析不了element的,所以才造成了这个问题(其实我在想我上一个版本并没有出现这个问题),然后为了vue组件库的代码完整性,他们有一个叫web-types的的元数据格式,然后在element的2.15.12版本的源代码里我确实看到了这个文件的,但是在npm包里没有这个文件,所以导致了组件和插槽是一个未知的WebStorm无法解析的状态

具体的回复如下(我也针对上一版本没有警告做出了回复,但是并没有给出为什么上一版本没有爆警告的原因):

具体的issueshttps://github.com/ElemeFE/element/issues/22261

解决办法

目前我的解决办法是在element的代码仓库手动下载web-types.json文件放到node_modules/element-ui目录下,然后重启WebStorm之后就解决了

最后

希望此篇文章能帮到一些同学

最后修改:2023 年 01 月 16 日
如果觉得我的文章对你有用,请随意赞赏