給Table組件添加Click事件,實現點擊某行數據操作
| customRow | 設置行屬性 | Function(record, index) |
|---|
通過customRow 屬性給table添加自定義事件
|
1
2
3
4
5
6
7
8
|
<a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelect: handleSelect}" bordered :customRow="handleClickRow" > </a-table> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
methods: { handleClickRow(record, index){ return { on: { click: () => { console.log(record, index) console.log('點擊行內容record' + record) console.log('序號索引index' + index) } } } }} |
控制臺輸出：
補充知識：利用filetr 操作 ant-design table某一行的某一列的數據。點擊切換真實數據和加密數據
情景描述：
如果有這樣一個需求，在table中的某一列的數據，不能直接展示原始數據，而是使用加密符號代替，只有點擊了某行某列之后，才能切換到真實數據，每次點擊就是一次切換。
這樣類似的需求你會怎么實現？
這里使用ant-design UI框架中的table組件做為例子來講。
首先，肯定會想到用filter(angular中叫pipe，vue里面叫filter)。
上代碼：
|
1
2
3
4
|
<span slot="secret" slot-scope="record"> <span @click="showCode(record)" style="cursor: pointer;">{{ record | codeFilter(secret, currentRecordId) }}</span></span> |
這里，我們使用了codeFilter這個filter，它有三個參數。
所以，我們先要創建這個filter,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Vue.filter('permisssionCodeFilter', function (data, secret, id) { // 初始狀態，所有code都以保密符號顯示 if (!id) { if (secret) { return replaceString(data.code, '*') } else { return data.code } } else { // 如果是點擊了某行，則只響應該行code是保密顯示還是直接顯示，其他非點擊行都以保密符號顯示 if (id === data.id) { if (secret) { return replaceString(data.code, '*') } else { return data.code } } else { return replaceString(data.code, '*') } }}) |
初始狀態下，我們沒有點擊任何一行，所以id肯定是空的，那么根據secret這個參數是true還是false來決定所有行的數據都是直接顯示還是加密符號顯示。
replaceString（）是一個公共方法，用來替換字符串的值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/** * replace string * @param string * @param target */export function replaceString (string, target) { let retValue = string const stringArr = string.split('') stringArr.forEach(t => { retValue = retValue.replace(t, target) }) return retValue} |
接著，如果是點擊了某行的那個數據，怎么做到該數據要顯示真實數據還是加密符號？如果是點了其他行，怎么隱藏該行的數據，而顯示當前點擊行的數據？
先看點擊事件的方法：
|
1
2
3
4
5
6
7
8
9
10
11
|
showCode (record) { // 如果當前行顯示的是密文，則先將點擊行的id賦給currentId,以便下面這個條件可以滿足，修改screct的值； // 如果當前行顯示的是明文，則不需要滿足下面的條件，secret的值無需修改，因為點擊該行之后，所有行數據都是顯示密文 if (this.secret) { this.currentId = record.id } if (!this.currentId || this.currentId === record.id) { this.secret = !this.secret } this.currentId = record.id }, |
如果當前行顯示的是密文，則先將點擊行的id賦給currentId,以便下面這個條件可以滿足，修改screct的值；
如果當前行顯示的是明文，則不需要滿足下面的條件，secret的值無需修改，因為點擊該行之后，所有行數據都是顯示密文；
這樣就實現了。
要注意的是，這種方法只是臨時改變了數據顯示在那一列的顯示，并沒有直接改變表格數據中該列的值。
有些場景是要直接改變表格數據的值，才能在表格上更新，比如該列的值是展示在一個input控件里。
以上這篇Antd-vue Table組件添加Click事件,實現點擊某行數據教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/m0_37903882/article/details/101322212
