关于vue.js:关于-Vuejs-30-UI-Library-elementplus-官网部分-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>
<span slot="title"> 分组一 </span>
...

三、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. …