vue3使用ant design vue点击表格行事件

原创已于 2023-05-14 17:18:07 修改 · 2.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

13 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2021-10-15 15:34:06 首次发布

本文介绍了如何在Vue 3.0中使用Ant Design的<a-table>组件，通过rowClassName属性实现表格行的条纹样式，并添加自定义行点击事件处理函数。通过`table-striped`类和`customRow`属性，展示了如何定制表格交互行为。

结合官方文档：https://2x.antdv.com/components/table-cn
在这里插入图片描述

 <a-table
      :rowClassName="
        (record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
      class="ant-table-striped"
      :columns="columns"
      :data-source="orderList"
      :customRow="rowClick"   //点击行事件
      }}
    >
 </a-table>

/**
*    vue3.0写法
*/

function rowClick(record, index)  {
      return {
          onclick: () => {
            console.log(record,index)
          }
      }
    },