【区分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。

相关推荐
程序猿阿伟1 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据1 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉1 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge2 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
Hi202402173 小时前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
chxii3 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够3 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋35 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫6 小时前
Vue初始化脚手架
前端·javascript·vue.js