使用customRow 設(shè)置行屬性，寫(xiě)對(duì)應(yīng)事件

:customRow='rowClick'

然后在data里面寫(xiě)

rowClick: record => ({ // 事件 on: { click: () => { // 點(diǎn)擊改行時(shí)要做的事情 // ...... console.log(record, ’record’) } } })

在官方文檔中也寫(xiě)的很清楚

補(bǔ)充知識(shí)：Ant-Design-Vue table 合并單元格，并且添加點(diǎn)擊事件

點(diǎn)擊行，有一個(gè)customRow。可以配置點(diǎn)擊事件。

單元格的自定義分為兩種方式。

一種是：通過(guò)template標(biāo)簽。

html部分

// text為dataIndex中的值，data為行數(shù)據(jù)，index為索引值<template slot='xxx' slot-scope='text,data,index'>{{text|xxxFormat}}</template>

js部分

//table的columns設(shè)定，customRender對(duì)應(yīng)著html中的slot值columns = [ { title: '列名', dataIndex: 'aaa', scopedSlots: { customRender: ’xxx’ }},]

一種是：customRender。下面給出來(lái)的是合并單元格的一段代碼。

vm.columns = [ { title: '列名', dataIndex: 'aaa', customRender: (text, row, index) => { var obj = { children: text, attrs: {} } if (index % 2 == 0) { obj.attrs.rowSpan = 2; } else { obj.attrs.rowSpan = 0; } return obj; } },];

在合并單元格的代碼中可以看出。obj實(shí)際上操作的是td的相關(guān)屬性。children中的內(nèi)容是放在td中的。這個(gè)內(nèi)容就類(lèi)似于上面的template。因?yàn)槟懿僮鱰d以及內(nèi)部的內(nèi)容，所以這種方法的靈活性更加高。對(duì)于單元格合并這種操作來(lái)說(shuō)，只能通過(guò)customRender來(lái)了。

雖然官方給了很多在table中添加a標(biāo)簽的例子，不過(guò)都沒(méi)有對(duì)點(diǎn)擊事件填寫(xiě)相應(yīng)的方法調(diào)用。

如果只是簡(jiǎn)單的點(diǎn)擊事件，可以通過(guò)簡(jiǎn)單地template調(diào)用點(diǎn)擊事件。也可以方便的傳參數(shù)。

<template slot='xxx' slot-scope='text,data,index'><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' @click='clickMe'>你點(diǎn)我呀</a></template>

知識(shí)點(diǎn)，來(lái)了，如果是合并單元格里面添加點(diǎn)擊事件呢？

第一次 嘗試

customRender: (text, row, index) => { var obj = { children: <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' click=’cityClick(text)’>{text}</a>, attrs: {} }; if (index % 2 == 0) { obj.attrs.rowSpan = 2; } else { obj.attrs.rowSpan = 0; } return obj;},

自己寫(xiě)的時(shí)候，心里就覺(jué)得別扭，click=’cityClick(text)’這個(gè)地方值能傳進(jìn)去么？

試了下，呵呵噠，方法都不好使，也不報(bào)錯(cuò)。。

第二次嘗試,借鑒下customRow

customRender: (text, row, index) => { var obj = { children: <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >{text}</a>, attrs: {}, on: { click: () => { this.$message.info(text); } } }; if (index % 2 == 0) { obj.attrs.rowSpan = 2; } else { obj.attrs.rowSpan = 0; } return obj;},

寫(xiě)完之后，自我感覺(jué)還是不錯(cuò)的，試一下。

不動(dòng)如山。。。

第三次嘗試，祭出大殺器 vue-jsx

children不能簡(jiǎn)簡(jiǎn)單單的寫(xiě)個(gè)<a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >{text}</a>，得給他翻譯翻譯

虛擬DOM不錯(cuò)的樣子

var vm = this;const columns = [ { title: ’Name’, dataIndex: ’name’ }, { title: ’City’, dataIndex: ’city’, customRender: (text, row, index) => { var child = vm.$createElement('a', { domProps: { innerHTML: text }, on: { click: function () { vm.cityClick(text); } } }); var obj = { children: child, attrs: {}, }; if (index % 2 == 0) { obj.attrs.rowSpan = 2; } else { obj.attrs.rowSpan = 0; } return obj; }, },

再單獨(dú)把實(shí)現(xiàn)方法拿出來(lái)

var child = vm.$createElement('a', { domProps: { innerHTML: text }, on: { click: function () { vm.cityClick(text); } }});

看看效果

完美~~~

以上這篇vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。