njzscloud-dispose-web/src/components/a-table-column/ADesensitizeColumn.vue

42 lines
910 B
Vue

<script lang="ts" setup>
import ADesensitize from '@/components/a-desensitize/ADesensitize.vue'
const showDesensitize = ref(false)
defineProps<{
label: string
prop: string
desensitizeType: 'mobile' | 'idcard' | 'email' | 'bankCard' | 'name'
}>()
</script>
<template>
<ElTableColumn :label="label">
<template #default="scope">
<span>
<slot :scope="scope"/>
<ADesensitize :show="showDesensitize" :type="desensitizeType" :value="scope.row[prop]"/>
</span>
</template>
<template #header>
<span class="desensitize-header" @click="showDesensitize = !showDesensitize">
{{ label }}
</span>
</template>
</ElTableColumn>
</template>
<style lang="stylus" scoped>
.desensitize-header {
display: inline-block;
cursor: pointer;
user-select none
&:hover {
color: var(--el-color-primary);
text-decoration: underline;
}
}
</style>