姓名，身份证号，关键信息脱敏

<template>
  <a-table id="tabledata" ref="table" size="middle" bordered rowKey="id" :columns="columns">
    <!-- 作用域插槽 -->
    <template slot="cardNo" slot-scope="text, record, index">
      <span v-if="record.lickOne" @click="showenter(index)">{{ record.cardNo | hideMiddle }}</span>
      <span v-else @click="showleave(index)">{{ record.cardNo }}</span>
      <!-- <span>{{ record }}</span> -->
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '证件号码',
          align: 'center',
          dataIndex: 'cardNo',
          //绑定作用域插槽
          scopedSlots: { customRender: 'cardNo' }
        }
      ]
    }
  },
  //过滤器
  filters: {
    hideMiddle(val) {
      return `${val.substring(0, 6)}********${val.substring(val.length - 4)}`
    },
    // 姓名
    hidename(val) {
      return `${val.substring(0, 0)}*${val.substring(val.length - 1)}`
    }
  },
  methods: {
    //身份证号脱敏
    showenter(index) {
      this.dataSource[index].lickOne = false
    },
    showleave(index) {
      this.dataSource[index].lickOne = true
    },

    //往数据加载方法里面循环进去一个假数据
    loadData() {
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          //在这个地方写一个forEach
          res.result.records.forEach(item => {
            item.lickOne = true
            item.lickOnename = true
          })
          //   截止
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      })
    }
  }
}
</script>

<style></style>