700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > ant design vue table表格组件customRow用法

ant design vue table表格组件customRow用法

时间:2019-11-27 06:47:12

相关推荐

ant design vue table表格组件customRow用法

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的全部内容

官方用法示例解读:

<TablecustomRow={(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的基本使用方法的一点总结,如有错误,感谢指正!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。