Ant Design Vue 给table表格行加点击事件

简介: Ant Design Vue 给table表格行加点击事件

首先官方定义的是customRow设置行属性

image.png官网上会给出这么使用:

customRow 用法

适用于 customRowcustomHeaderRowcustomCellcustomHeaderCell。遵循Vue jsx语法。

<Table
  customRow={(record) => {
    return {
      xxx... //属性
      onClick: (event) => {},       // 点击行
      onDblclick: (event) => {},
      onContextmenu: (event) => {},
      onMouseenter: (event) => {},  // 鼠标移入行
      onMouseleave: (event) => {}
    };
  }}
  customHeaderRow={(column) => {
    return {
      onClick: () => {},        // 点击表头行
    };
  }}
/>

但是很多小伙伴可能不会使用这种语法,或者一用就报错,跟我刚开始用一样 ,下面我们会介绍另一种方法:

正题

第一步

给a-table元素内加入这个属性 :customRow="rowClick"

1.<a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :customRow="rowClick"
    />

第二步

这样定义函数名就可以,然后返回你想用什么事件触发,这里点击事件触发onClick,返回的第一个参数是点击的行参数,第二个是行下标

function rowClick(record, index) {
      return {
        onClick: (event) => {
          console.log(record.tablename, index, event, "666");
        },
      };
    }

这里我用的是vue3.0,vue2.0写到方法里即可

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

相关文章
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
1292 1
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
274 0
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1292 6
Vue使用element中table组件实现单选一行
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
1030 0
Vue3表格(Table)
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
1474 0
|
JavaScript
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
329 1
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
675 2
|
7月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
574 137
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1098 0

热门文章

最新文章