快捷導(dǎo)航

Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程

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

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

給Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)操作

customRow	設(shè)置行屬性	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('點(diǎn)擊行內(nèi)容record' + record)
    console.log('序號(hào)索引index' + index)
    }
   }
  }
 }
}

控制臺(tái)輸出：

補(bǔ)充知識(shí)：利用filetr 操作 ant-design table某一行的某一列的數(shù)據(jù)。點(diǎn)擊切換真實(shí)數(shù)據(jù)和加密數(shù)據(jù)

情景描述：

如果有這樣一個(gè)需求，在table中的某一列的數(shù)據(jù)，不能直接展示原始數(shù)據(jù)，而是使用加密符號(hào)代替，只有點(diǎn)擊了某行某列之后，才能切換到真實(shí)數(shù)據(jù)，每次點(diǎn)擊就是一次切換。

這樣類似的需求你會(huì)怎么實(shí)現(xiàn)？

這里使用ant-design UI框架中的table組件做為例子來講。

首先，肯定會(huì)想到用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這個(gè)filter，它有三個(gè)參數(shù)。

所以，我們先要?jiǎng)?chuàng)建這個(gè)filter,

Vue.filter('permisssionCodeFilter', function (data, secret, id) {
 // 初始狀態(tài)，所有code都以保密符號(hào)顯示
 if (!id) {
 if (secret) {
  return replaceString(data.code, '*')
 } else {
  return data.code
 }
 } else { // 如果是點(diǎn)擊了某行，則只響應(yīng)該行code是保密顯示還是直接顯示，其他非點(diǎn)擊行都以保密符號(hào)顯示
 if (id === data.id) {
  if (secret) {
  return replaceString(data.code, '*')
  } else {
  return data.code
  }
 } else {
  return replaceString(data.code, '*')
 }
 }
})

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

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

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

接著，如果是點(diǎn)擊了某行的那個(gè)數(shù)據(jù)，怎么做到該數(shù)據(jù)要顯示真實(shí)數(shù)據(jù)還是加密符號(hào)？如果是點(diǎn)了其他行，怎么隱藏該行的數(shù)據(jù)，而顯示當(dāng)前點(diǎn)擊行的數(shù)據(jù)？

先看點(diǎn)擊事件的方法：

showCode (record) {
  // 如果當(dāng)前行顯示的是密文，則先將點(diǎn)擊行的id賦給currentId,以便下面這個(gè)條件可以滿足，修改screct的值；
  // 如果當(dāng)前行顯示的是明文，則不需要滿足下面的條件，secret的值無需修改，因?yàn)辄c(diǎn)擊該行之后，所有行數(shù)據(jù)都是顯示密文
  if (this.secret) {
  this.currentId = record.id
  }
  if (!this.currentId || this.currentId === record.id) {
  this.secret = !this.secret
  }
  this.currentId = record.id
 },

如果當(dāng)前行顯示的是密文，則先將點(diǎn)擊行的id賦給currentId,以便下面這個(gè)條件可以滿足，修改screct的值；

如果當(dāng)前行顯示的是明文，則不需要滿足下面的條件，secret的值無需修改，因?yàn)辄c(diǎn)擊該行之后，所有行數(shù)據(jù)都是顯示密文；

這樣就實(shí)現(xiàn)了。

要注意的是，這種方法只是臨時(shí)改變了數(shù)據(jù)顯示在那一列的顯示，并沒有直接改變表格數(shù)據(jù)中該列的值。

有些場(chǎng)景是要直接改變表格數(shù)據(jù)的值，才能在表格上更新，比如該列的值是展示在一個(gè)input控件里。

以上這篇Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: