利用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控件裏。

 

——end

歡迎補充