vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作
使用customRow 設(shè)置行屬性，寫對(duì)應(yīng)事件
:customRow="rowClick"
然后在data里面寫
rowClick: record => ({
// 事件
on: {
click: () => {
// 點(diǎn)擊改行時(shí)要做的事情
// ......
console.log(record, 'record')
}
}
})
在官方文檔中也寫的很清楚
補(bǔ)充知識(shí)：Ant-Design-Vue table 合并單元格，并且添加點(diǎn)擊事件
點(diǎn)擊行，有一個(gè)customRow。可以配置點(diǎn)擊事件。
單元格的自定義分為兩種方式。
一種是：通過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。下面給出來的是合并單元格的一段代碼。
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)容就類似于上面的template。因?yàn)槟懿僮鱰d以及內(nèi)部的內(nèi)容，所以這種方法的靈活性更加高。對(duì)于單元格合并這種操作來說，只能通過customRender來了。
雖然官方給了很多在table中添加a標(biāo)簽的例子，不過都沒有對(duì)點(diǎn)擊事件填寫相應(yīng)的方法調(diào)用。
如果只是簡單的點(diǎ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)，來了，如果是合并單元格里面添加點(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;
},
自己寫的時(shí)候，心里就覺得別扭，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;
},
寫完之后，自我感覺還是不錯(cuò)的，試一下。
不動(dòng)如山。。。
第三次嘗試，祭出大殺器 vue-jsx
children不能簡簡單單的寫個(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)方法拿出來
var child = vm.$createElement("a", {
domProps: {
innerHTML: text
},
on: {
click: function () {
vm.cityClick(text);
}
}
});
看看效果
完美~~~
以上這篇vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng),創(chuàng)建兩個(gè)table，隱藏第一個(gè)table的body部分，這樣就能得到一個(gè)固定的head，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue動(dòng)態(tài)綁定Class的幾種常用方式
在vue框架開發(fā)中,有時(shí)候我們需要對(duì)元素的樣式進(jìn)行動(dòng)態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03
利用vue實(shí)現(xiàn)密碼輸入框/驗(yàn)證碼輸入框
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)密碼輸入框或驗(yàn)證碼輸入框的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟
這篇文章主要介紹了在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了vue面試observable原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue使用babel-polyfill兼容IE解決白屏及語法報(bào)錯(cuò)問題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語法報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中使用eslint和editorconfig方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實(shí)例)
最近了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04