关于 Vue.js 3.0 UI Library element-plus 官网部分 Demo 失效原因汇总

Element Plus A Vue.js 3.0 UI Library.

一、Card 卡片

Card 卡片之基础 Demo - header 失效

失效原因

含有 heder 的示例代码中，设置 header 的方式是采用的已废弃的 slot attribute 语法。

<div slot="header">
    //...
</div>

解决方式

在向具名插槽提供内容的时候，在 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

<el-card shadow="shadow">
  <template v-slot:header>
    // ...
  </template>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>

备注：v-slot:header 可以简写成 #header 。

二、NavMenu 导航菜单

所有 Demo 失效

失效原因

同上，使用具名插槽的地方采用的是已废弃的 slot attribute 语法。

<template slot="title">
  <i class="el-icon-location"></i>导航一
</template>
<span slot="title">分组一</span>
...

解决方式

在向具名插槽提供内容的时候，在 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

<template v-slot:title>
  <i class="el-icon-location"></i>
    <span>导航一</span>
</template>
<template #title>分组一</template>
...

三、Transfer 穿梭框

目前官网状态是控制台报错， 页面空白。

Transfer 穿梭框之可自定义 Demo - 使用 scoped-slot 自定义数据项失效

失效原因

使用 scoped-slot 自定义数据项的示例代码中，使用了已被 3.0 废弃的 slot-scope attribute 的语法。

...
<p>使用 scoped-slot 自定义数据项</p>
<div style="text-align: center">
  <el-transfer
    v-model="value4"
    filterable
    :left-default-checked="[2, 3]"
    :right-default-checked="[1]"
    :titles="['Source', 'Target']"
    :button-texts="['到左边', '到右边']"
    @change="handleChange"
    :data="data">
    <!-- 下面的的作用域插槽语法被遗弃 -->
    <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
    ...
  </el-transfer>
</div>

解决方式

使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

<p>使用 scoped-slot 自定义数据项</p>
<div style="text-align: center">
  <el-transfer
    v-model="value4"
    filterable
    :left-default-checked="[2, 3]"
    :right-default-checked="[1]"
    :titles="['Source', 'Target']"
    :button-texts="['到左边', '到右边']"
    @change="handleChange"
    :data="data">
    <!-- 下面的是修改后的语法 -->
    <template v-slot:default="slotProps">
      <span>{{ slotProps.option.key }} - {{ slotProps.option.label }}</span>
    </template> 
    ...
  </el-transfer>
</div>

上边代码中的作用域插槽语法可以简写成参数解构的形式：

<template v-slot="{ option }">
  <span>{{ option.key }} - {{ option.label }}</span>
</template> 

备注：因为源码实现中设置的 key 为 option ，所以参数必须为 { option }。

四、 Upload 上传

目前官网状态是控制台报错， 页面空白。

Upload 上传之文件缩略图 Demo - 使用 scoped-slot 去设置缩略图模版

失效原因

同上，使用 scoped-slot 自定义数据项的示例代码中，使用了已被 3.0 废弃的 slot-scope attribute 的语法。

<div slot="file" slot-scope="{file}">
  ...
<div>

解决方式

使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

<template v-slot:file v-slot="{ file }">
  ...
</template>

五、其他问题

关于 InfiniteScroll 无限滚动

1. 无限滚动卡顿
2. ...