ant design vue table表格组件customRow用法

最新推荐文章于 2025-02-14 15:26:37 发布

耿直剪纸怪

最新推荐文章于 2025-02-14 15:26:37 发布

阅读量7.3k

点赞数 3

本文链接：https://blog.youkuaiyun.com/asunny_/article/details/115835157

版权

本文介绍了Ant Design Vue的Table组件中customRow的用法，通过示例展示了如何绑定click方法来响应行点击事件，获取当前行的数据记录，并提供了官方用法的解读，包括props和on属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design vue table表格组件customRow用法

话不多说上示例：

html代码：customRow绑定一个click方法，名字自己可以随便起

<a-table
              :columns="columns"
              :data-source="data"
              :customRow='click'>

js代码：

methods： {
	click(record, index) {
  		return {
     		on: {
        		dblclick: () => {
          			console.log(record);
        		}
     		}
  		}
	}
}

在js中的methods中创建方法click(record, index)。record与index 分别是该行的数据(可以获取到放在data-source中的所有属性，即使没有在表格中呈现出来的也可以获取到）和该行数据在表格中的下标。

通过上面的写法，我可以在双击表格某一行的时候，打印出这一行所绑定的data的全部内容。

官方用法示例解读：

<Table
  customRow={(record) => {
    return {
      props: {
        xxx... //属性
      },
      on: { // 事件
        click: (event) => {},       // 点击行
        dblclick: (event) => {},
        contextmenu: (event) => {},
        mouseenter: (event) => {},  // 鼠标移入行
        mouseleave: (event) => {}
      },

    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // 点击表头行
      }
    };
  )}
/>

官方用法是customRow属性绑定了一个对象，同时这个对象也可以获取到record中的内容。这个对象拥有props属性(非必传参)和on属性。props中可以用来放在父组件传入的参数，on里面则是绑定了单击、双击一些事件，这里面的click、dblclick则是固定名称，写入的方法就是单击双击实现的效果。

以上便是自己对table组件customRow的基本使用方法的一点总结，如有错误，感谢指正！