Antd-vue Table組件添加Click事件,實現點擊某行數據教程

更新時間：2020年11月17日 11:01:53 作者：DuebassLei

這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現點擊某行數據教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

給Table組件添加Click事件,實現點擊某行數據操作

customRow	設置行屬性	Function(record, index)

通過customRow 屬性給table添加自定義事件

<a-table
  :columns="columns"
  :dataSource="data"
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelect: handleSelect}"
  bordered
  :customRow="handleClickRow"
 >
 </a-table>

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)。

上代碼：

<span slot="secret" slot-scope="record">
  <span @click="showCode(record)" style="cursor: pointer;">{{ record | 
  codeFilter(secret, currentRecordId) }}</span>
</span>

這里，我們使用了codeFilter這個filter，它有三個參數。

所以，我們先要創(chuàng)建這個filter,

Vue.filter('permisssionCodeFilter', function (data, secret, id) {
 // 初始狀態(tài)，所有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, '*')
 }
 }
})

初始狀態(tài)下，我們沒有點擊任何一行，所以id肯定是空的，那么根據secret這個參數是true還是false來決定所有行的數據都是直接顯示還是加密符號顯示。

replaceString（）是一個公共方法，用來替換字符串的值

/**
 * 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
}

接著，如果是點擊了某行的那個數據，怎么做到該數據要顯示真實數據還是加密符號？如果是點了其他行，怎么隱藏該行的數據，而顯示當前點擊行的數據？

先看點擊事件的方法：

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事件,實現點擊某行數據教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: