【区分vue2和vue3下的element UI Table 表格组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 和 Vue 3 中,Element UI 和 Element Plus 分别提供了 Table 表格组件。下面我将分别介绍这两个版本下表格组件的属性、事件和方法,并给出使用示例。

Vue 2 + Element UI Table
属性 (Attributes)
data: 表格数据,类型为数组。
columns: 列的描述数据对象,类型为数组。
border: 是否带有纵向边框。
stripe: 是否为斑马纹表格。
fit: 列的宽度是否自撑开。
highlight-current-row: 是否要高亮当前行。
事件 (Events)
selection-change: 当用户选择行发生变化时会触发该事件。
cell-click: 当某个单元格被点击时会触发该事件。
row-click: 当某一行被点击时会触发该事件。
方法 (Methods)
Element UI 的 Table 组件没有直接暴露太多方法,但你可以通过引用 (ref) 访问 Vue 实例,并调用 Vue 的内置方法。

示例
vue

<el-table
:data=“tableData”
style=“width: 100%”
@selection-change=“handleSelectionChange”

<el-table-column  
  type="selection"  
  width="55"  
>  
</el-table-column>  
<el-table-column  
  prop="date"  
  label="日期"  
  width="140"  
>  
</el-table-column>  
<el-table-column  
  prop="name"  
  label="姓名"  
  width="120"  
>  
</el-table-column>  

Vue 3 + Element Plus Table
属性 (Attributes)
data: 表格数据,类型为数组。
columns: 列的描述数据对象,类型为数组。
border: 是否展示纵向边框。
stripe: 是否为斑马线表格。
fit: 列的宽度是否自撑开。
highlight-current-row: 是否要高亮当前行。
事件 (Events)
selection-change: 当选中项发生变化时会触发该事件。
cell-click: 当某个单元格被点击时会触发该事件。
row-click: 当某一行被点击时会触发该事件。
方法 (Methods)
与 Element UI 类似,Element Plus 的 Table 组件也没有直接暴露很多方法,但你可以通过 ref 访问 Vue 3 的组件实例,并使用 Vue 3 的 Composition API 进行操作。

示例 (使用 Composition API)
vue

<el-table
:data=“tableData”
style=“width: 100%”
@selection-change=“handleSelectionChange”

<!-- 列定义与 Element UI 类似 -->  

在 Vue 3 中,使用

总的来说,Element UI 和 Element Plus 的 Table 组件在属性和事件方面非常相似,主要的区别在于 Vue 2 和 Vue 3 的使用方式和语法差异。在 Vue 3 中,你更可能使用 Composition API 来组织你的代码,而在 Vue 2 中,你通常会使用 Options API。

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加仑小铁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值