element-plus表格组件头部设置

element-plus表格组件头部手机号显示隐藏
通过插槽对表格column设置内容

<el-table-column label="联系电话" align="center" prop="mobile" width="120">
  <!-- 表头 -->
  <template #header>
    <span>联系电话</span>&nbsp;
    <Icon icon="ep:view" class="icon-mt" @click="showPhone" v-if="isShowPhone" />
    <Icon icon="ep:hide" class="icon-mt" @click="showPhone" v-else />
  </template>
  <!-- 内容 -->
  <template #default="scope">
    <span v-if="!isShowPhone">{{ formatNum(scope.row.mobile) }}</span>
  </template>
</el-table-column>

// 点击显示手机号
let isShowPhone = ref(false);
const showPhone = () => {
  isShowPhone.value = !isShowPhone.value;
}