element组件的属性、事件和方法怎么使用

简介: 我们在使用element组件的时候,经常会使用到组件的属性、事件和方法,但对于第一次接触element组件的小白来说,由于没有代码示例,所以不知道怎么使用组件的属性、事件和方法是很常见的情况,所以本文将教会大家怎么去使用element组件的属性、事件和方法

本篇以Element Plus的表格为例,为大家讲述怎么使用属性、事件和方法

fc49b2d2b40649ad98ad95d1c40a0d10.png

首先,我们引入表格的代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
</script>

我们看到表格里主要绑定了一个data和内联样式(这个暂时不管)

其实这个data,就是表格的一个属性,我们翻到表格的属性,可以看到data赫然在列

31f2bd46041b4a0ea6fefc0f9a2b7543.png

所以对于其他的属性,我们可以照葫芦画瓢的去使用,例如下面的例子:

 <el-table :data="tableData" :height='300' :stripe='false'  style="width: 100%">

注意要在使用的属性前加上


事件,即组件可以绑定是事件,我们学过vue的事件用的是 @ 去绑定,同理,我们在组件中也是这样去使用的


点击table的事件,我们可以看到有很多预设的事件名

6068efddbd50466f8b95241354984dcc.png

那我们该怎么使用呢,如下面的代码所示:

 <el-table 
 :data="tableData" 
 :height='300' 
 :stripe='false' 
 @select='事件名'
 style="width: 100%">
我们在表格内加了事件之后,在script便可以写对应的函数
<script>
const 事件名 = (row, column) => {
  console.log(row,column)
  }
</script>

我们可以选择我们想要的对应的效果的事件名,绑定后直接使用即可


最后一个,方法 ,方法是对应元素的值使用的

比如我们有一个这样的多选表格

221d352e28f6457ea8a45f6efefde5b0.png

如果表格是全选中的情况,我们想把表格的全选变成不选

那我们是不是可以使用 clearSelection 这个方法

c0ce0c47c7934d38b5e34268d25bfc89.png

所以我们可以在函数内部去调用这个方法

  const 函数名 = () => {
    // 调用clearSelection()
    table.value.clearSelection()
  }

总结:属性和事件是写在标签内的,属性要加:,事件要加@,方法是用在函数内的


如在开发问题中遇到问题,可私聊博主

如有错字,还请原谅!博客预告:让学前端不再害怕英语单词(五)和前端学习路线(四),同时也会更新前端静态页面开发思路(四)

目录
打赏
0
1
0
0
9
分享
相关文章
Vue3多个弹窗同时出现解决思路
Vue3多个弹窗同时出现解决思路
1085 3
Vue3多个弹窗同时出现解决思路
Eclipse安装教程 ——史上最详细安装Java创建项目教程说明
Eclipse安装教程 ——史上最详细安装Java创建项目教程说明
1570 1
Eclipse安装教程 ——史上最详细安装Java创建项目教程说明
【报错】unhandled error during execution of watcher callback
JavaScript错误`unhandled error during execution of watcher callback`在Echarts图表渲染时出现,通常是因数据未获取到就尝试渲染导致。解决方法是在渲染前添加非空判断,如`if(value){开始渲染数据}`或`if(value !== undefined){开始渲染数据}`,确保数据加载完成后再执行渲染。
1070 0
【Vue 3】推荐 1 个简约且美丽的天气组件
【Vue 3】推荐 1 个简约且美丽的天气组件
【Python】GUI:Kivy库环境安装与示例
这篇文章介绍了 Kivy 库的安装与使用示例。Kivy 是一个开源的 Python 库,支持多平台开发,适用于多点触控应用。文章详细说明了 Kivy 的主要特点、环境安装方法,并提供了两个示例:一个简单的 Hello World 应用和一个 BMI 计算器界面。
326 0
电竞英雄联盟LOL数据api接口示例
电竞英雄联盟LOL数据api接口示例
vue element plus Input Number 数字输入框
vue element plus Input Number 数字输入框
644 0

热门文章

最新文章

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问