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