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 有限滚动
- 有限滚动卡顿
- ...