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

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

element中怎么模拟点击 element怎么用_前端


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

<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赫然在列

element中怎么模拟点击 element怎么用_开发语言_02


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

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

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

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

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

element中怎么模拟点击 element怎么用_开发语言_03


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

<el-table 
 :data="tableData" 
 :height='300' 
 :stripe='false' 
 @select='事件名'
 style="width: 100%">
我们在表格内加了事件之后，在script便可以写对应的函数

<script>
const 事件名 = (row, column) => {
	console.log(row,column)
	}
</script>

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

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

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

element中怎么模拟点击 element怎么用_element中怎么模拟点击_04


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

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

element中怎么模拟点击 element怎么用_javascript_05


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

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

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