Vue Element plus使用方法梳理


Posted in Vue.js onDecember 24, 2022

说明

  • 本教程适用于Element-plus的使用非常熟练
  • 本教程是对Element-plus的高度总结
  • 组件属性的使用
  • 组件插槽的使用
  • 组件内部事件的使用
  • 组件外部方法的使用

一、组件属性的使用

可以在组件中直接使用

Vue Element plus使用方法梳理

<el-form
	:model="form"
	label-width="120px"
>
	//model、label-width属于组件属性、上图中可以查找
    <el-form-item label="Activity name">
    </el-form-item>
</el-from>

二、组件内部事件的使用

可以在组件中直接使用

Vue Element plus使用方法梳理

<el-dialog
	 v-model="Data.exportcenterDialogVisible"
	 title="导入数据"
	 width="30%"
	 @closed ="closedmenu"
 >
<!--@closed是内部事件调用-->
 </eldilog>

三、组件插槽的使用

在组件标签中间,添加以下代码

<template #插槽名>
<!--使用插槽方法-->
</template>

例:

Vue Element plus使用方法梳理

<template #footer>
 <!--<template #footer>是插槽footer的使用 -->
      <span class="dialog-footer">
        <el-button type="primary" @click="alldialogvisible" v-if="!Data.isView">
          保存
        </el-button>
        <el-button @click="closedmenu">取消</el-button>
      </span>
</template>

四、组件外部方法的使用

1、使用外部方法是要调用标签的$refs

要在组件标签中定义ref属性值(目地是为了在script中获取标签)

在script中

  • 先导入import type { uploadInstance } from ‘element-plus’
  • 定义ref属性 const ref 属性名 = ref<uploadInstance>()
  • 调用外部方法 ref属性名.value.外部方法()(注对元素进行操作)

2、使用方法

在组件中

<el-upload
   ref="uploadrefss"
>
<!--要在组件标签中定义ref属性值-->
</el-upload>

在script中

import type { UploadInstance } from 'element-plus'
const 函数名= () => {
  uploadrefss.value?.clearFiles()
 //clearFiles方法,对ref元素进行操作
}

到此这篇关于Vue Element plus使用方法梳理的文章就介绍到这了,更多相关Vue Element plus内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
Vue router配置与使用分析讲解
Dec 24 #Vue.js
vue实现简易音乐播放器
Aug 14 #Vue.js
Vue3实现简易音乐播放器组件
Aug 14 #Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 #Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
laravel自定义分页效果
2017/07/23 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python之yield和Generator深入解析
2019/09/18 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
北京故宫导游词
2015/01/31 职场文书
思品教学工作总结
2015/08/10 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS