VUE2/3:element ui table表格的显隐列（若依框架）

若依框架自带一个组件，封装了关于表格，展示和隐藏表格列的功能；

使用效果就是这样的，在表格上面，三个框，从左到右分别是隐藏上面搜索，刷新列表，和显隐列的功能；

 

 一、下面的代码放到RightToolbar/index.vue下，

二、main.js文件里封装

// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar'


app.component('RightToolbar', RightToolbar)

放到main.js全局挂载，使用的时候无须引入

三、具体代码

 下面是一页中必须有的，showSearch要定义，是控制表单是否显示的

columns也是必须有的，把表格的每一项按顺序写，表格里每一项需要控制的要写v-if="columns[0].visible"  0就是key值

const showSearch = ref(true);
// 列显隐信息
const columns = ref([
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
]);
/** 查询用户列表 */
function getList() {
  loading.value = true;
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false;
    userList.value = res.rows;
    total.value = res.total;
  });
};

四、效果展示