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

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

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

首先，我们引入表格的代码
<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赫然在列

所以对于其他的属性，我们可以照葫芦画瓢的去使用，例如下面的例子：
<el-table :data="tableData" :height='300' :stripe='false' style="width: 100%">
注意要在使用的属性前加上 ：

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

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

那我们该怎么使用呢，如下面的代码所示：
<el-table :data="tableData" :height='300' :stripe='false' @select='事件名' style=
"width: 100%"> 我们在表格内加了事件之后，在script便可以写对应的函数 <script> const 事件名 = (row, column)
=> { console.log(row,column) } </script>
我们可以选择我们想要的对应的效果的事件名，绑定后直接使用即可

最后一个，方法 ，方法是对应元素的值使用的
比如我们有一个这样的多选表格

如果表格是全选中的情况，我们想把表格的全选变成不选
那我们是不是可以使用 clearSelection 这个方法

所以我们可以在函数内部去调用这个方法
const 函数名 = () => { // 调用clearSelection() table.value.clearSelection() }
总结：属性和事件是写在标签内的，属性要加：，事件要加@，方法是用在函数内的

如在开发问题中遇到问题，可私聊博主
如有错字，还请原谅！博客预告：让学前端不再害怕英语单词（五）和前端学习路线（四），同时也会更新前端静态页面开发思路（四）

• « 上一篇：steam搬砖项目月入过万靠谱吗
• » 下一篇：详解git fetch与git pull的区别