脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue elementUI配置表格的列显示与隐藏

vue+elementUI配置表格的列显示与隐藏

 更新时间：2022年04月13日 11:29:44   投稿：lijiao  
这篇文章主要为大家详细介绍了vue+elementUI配置表格的列显示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue+elementUI配置表格的列显示与隐藏，供大家参考，具体内容如下

描述：

表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3的Element Plus）实现的，具体效果与代码如下：

效果图：

完整代码：

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <el-popover
            placement="bottom"
            :width="600"
            :visible="visible"
          >
            <!-- 配置列面板 -->
            <transition name="fade">
              <div>
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
                  <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
                  <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
                  <el-checkbox v-model="showColumn.city">市区</el-checkbox>
                  <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
                  <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <i
                class="el-icon-setting"
                style="font-size: 22px; cursor: pointer"
                @click="visible = true"
              ></i>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      // 列的配置化对象，存储配置信息
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      },
    };
  },
  mounted() {
    // 发请求得到showColumnInitData的列的名字
    if(localStorage.getItem("columnSet")){
      this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
    }else{
      this.showColumn = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      };
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    saveColumn() {
      localStorage.setItem("columnSet",JSON.stringify(this.showColumn))
      this.visible = false;
    },
  },
};
</script>

<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

问题：

1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；

2、elementUI的popover嵌套在table里使用时，会出现面板的显示bug，例如本文是采用:visible=“visible”，如果按照正常双向绑定v-model:visible=“visible”，则会出现弹窗闪现的现象，弹出后会立马关闭；

现象：

原因猜想：

v-model:visible=“visible”，会自动触发遮罩层关闭，置visible变为false（watch监听visible，点击弹出按钮时，visible变为true后会立马变为false）；

3、如果某一列设置minWidth属性，如果隐藏该列，则popover会出现弹出两个窗口的异常现象，例如“地址”列：

故可采用dialog来实现：

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="visible = true"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="字段配置" v-model="visible">
      <transition name="fade">
        <div>
          <div>选择显示字段</div>
          <div>
            <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
            <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
            <el-checkbox v-model="showColumn.city">市区</el-checkbox>
            <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
            <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
          </div>
        </div>
      </transition>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="saveColumn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue对象或者数组中数据变化但是视图没有更新问题及解决

    vue对象或者数组中数据变化但是视图没有更新问题及解决

    这篇文章主要介绍了vue对象或者数组中数据变化但是视图没有更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中xlsx的使用方法指南

    Vue中xlsx的使用方法指南

    这篇文章主要给大家介绍了关于Vue中xlsx的使用方法指南,有很多办法都可以实现,其中最简单的还是使用插件xlsx,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Vue项目中vue.config.js常用配置项详解

    Vue项目中vue.config.js常用配置项详解

    在 Vue CLI 创建的项目中,vue.config.js 是核心配置文件,用于定制化构建、开发和部署流程,本文详细解析了该文件的常用配置项,并结合代码示例和表格说明,帮助开发者高效管理项目配置,提升开发体验,需要的朋友可以参考下
    2025-04-04
  • 深入理解Vue-cli搭建项目后的目录结构探秘

    深入理解Vue-cli搭建项目后的目录结构探秘

    本篇文章主要介绍了深入理解Vue-cli搭建项目后的目录结构探秘，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • vue引用public目录下文件的方式详解

    vue引用public目录下文件的方式详解

    由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,下面这篇文章主要给大家介绍了关于vue引用public目录下文件的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue2.0构建单页应用最佳实战

    vue2.0构建单页应用最佳实战

    这篇文章主要为大家分享了vue2.0构建单页应用最佳实战案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 如何使用vue-json-viewer插件展示JSON格式数据

    如何使用vue-json-viewer插件展示JSON格式数据

    这篇文章主要给大家介绍了关于如何使用vue-json-viewer插件展示JSON格式数据的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下
    2023-11-11
  • vue3(optionApi)使用Element Plus库没有效果的解决方式

    vue3(optionApi)使用Element Plus库没有效果的解决方式

    这篇文章主要介绍了vue3(optionApi)使用Element Plus库没有效果的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue 全选与反选的实现方法(无Bug 新手看过来)

    vue 全选与反选的实现方法(无Bug 新手看过来)

    下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue背景图片路径问题及解决

    vue背景图片路径问题及解决

    这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07

最新评论