a-table 控制列的展示和隐藏

一、业务场景:

最近在使用 Antd-vue 组件库的时候,a-table需要根据不同角色的权限显示和隐藏 columns的列

为了避免大家走弯路,为大家整理了一下,粘走可以直接用的那种
二、具体实现步骤:

1.在需要显示与隐藏的列增加一个类名,通过CSS来实现

html 复制代码
tabkeColumns: [
            {
          title: '风险标签',
          dataIndex: 'riskLabel',
          key: 'riskLabel',
          // 如果是总行管理员才显示 风险标签 这一列
          className: this.$store.state.menus.userType == '1' ? 'tableShow' : 'tableHiddle',
        },

2.添加样式

html 复制代码
<style>
.tableHiddle {
  display: none;
}
.tableShow{
  display: block;
}
</style>

四、效果展示:

你已经成功了,撒花。

今天的分享到此结束,欢迎小伙伴们一起交流

相关推荐
yqcoder4 分钟前
vue2 和 vue3 生命周期的区别
前端·javascript·vue.js
excel15 分钟前
前端人必备的 JavaScript API 全面指南(含 postMessage、File、Stream、Web 组件等)
前端
m0_738120725 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7747 小时前
uniappx鸿蒙适配
前端
叫我阿柒啊8 小时前
Java全栈开发面试实战:从基础到微服务架构
java·vue.js·spring boot·redis·git·full stack·interview
山有木兮木有枝_8 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT8 小时前
js基础重点复习
javascript
言兴9 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra10 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋10 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app