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

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

      
      
      
      
      
      
    

    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

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

      
    

    在 Vue 3 中,使用

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

  • 相关阅读:
    UI自动化测试之Jenkins配置
    算法设计与分析双击调度自写
    xshell连接虚拟机慢
    国际海运详解:国际海运的发货方式有哪些?区别是什么?
    A Philosophy of Software Design读书笔记——信息隐蔽和泄露
    layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本
    SpringBoot+Vue实现前后端分离的社区疫情防控管理系统
    DAY55 583. 两个字符串的删除操作 + 72. 编辑距离
    基于Java后端与Typescript前端的代码自动生成 - malcolmcrum
    阿里云——OpenAPI使用——短信服务
  • 原文地址:https://blog.csdn.net/xiejunlan/article/details/139668422