給Table元件新增Click事件,實現點選某行資料操作

通過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，它有三個引數。

所以，我們先要建立這個filter,

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（）是一個公共方法，用來替換字串的值

/**
 * 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事件,實現點選某行資料教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。