vue+elementUI实现表格列的显示与隐藏


Posted in Vue.js onApril 13, 2022

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

描述:

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

效果图:

vue+elementUI实现表格列的显示与隐藏

完整代码:

<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”,则会出现弹窗闪现的现象,弹出后会立马关闭;

现象:

vue+elementUI实现表格列的显示与隐藏

原因猜想:

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

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

vue+elementUI实现表格列的显示与隐藏

故可采用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+elementUI实现表格列的显示与隐藏

以上就是本文的全部内容,希望对大家的学习有所帮助。

Vue.js 相关文章推荐
vue-router定义元信息meta操作
Dec 07 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php并发加锁示例
2016/10/17 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
技校生自我鉴定
2013/12/08 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
解除劳动合同证明书
2014/09/26 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android