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
分享
相关文章
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
6月前
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
209 0
Element table组件封装 核心:父子组件传值、传方法
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
66 0
vue(3) 出现了不能读的属性定义的报错但可以渲染如何解决
vue(3) 出现了不能读的属性定义的报错但可以渲染如何解决
236 0
Vue3中常用的语法详细分解(响应式数据,声明响应式数据,自定义事件,计算属性,监听器)
Vue3中常用的语法详细分解(响应式数据,声明响应式数据,自定义事件,计算属性,监听器)
303 0
前端学习笔记202304学习笔记第十天-vue3.0-监听对象中单个属性的变化
前端学习笔记202304学习笔记第十天-vue3.0-监听对象中单个属性的变化
43 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等