vue实现动态控制el-table表格列的展示与隐藏

本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下

1.引入el-table组件,这里我直接用官网的示例代码

<template>
    <div class="page">
        <el-popover width="60" trigger="click">
            <el-checkbox-group v-model="columnSelecteds">
                <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" ></el-checkbox>    
            </el-checkbox-group>
            <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button>
        </el-popover>
        <el-table
            :data="tableData"
            ref="dataTable"
            stripe
            style="width: 100%">
            <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column>
            <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column>
            <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>

页面效果图:

2.数据绑定与监听

<script>
export default {
    name: 'ElTableTest',
    data() {
        return {
            // 表格数据
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            //表头信息
            columnHeaders: [ 
                {index: 0, title: "日期", isShow: true},
                {index: 1, title: "姓名", isShow: true},
                {index: 2, title: "地址", isShow: true}
            ],  
            //已选择的项
            columnSelecteds: ["日期","姓名", "地址"] 
        }   
    },
    watch: {
        /**
         * @title 监听列显示隐藏
         */
        columnSelecteds(newArrayVal) {
            // 计算为被选中的列标题数组
            var nonSelecteds = this.columnHeaders
                        .filter(item => newArrayVal.indexOf(item.title) == -1) 
                        .map(item => item.title)
            // 根据计算结果进行表格重绘
            this.columnHeaders.filter(item => {
                let isNonSelected = nonSelecteds.indexOf(item.title) != -1
                if (isNonSelected) {
                    // 隐藏未选中的列
                    item.isShow = false
                    this.$nextTick(() => {
                        this.$refs.dataTable.doLayout()
                    })
                } else {
                    // 显示已选中的列
                    item.isShow = true
                    this.$nextTick(() => {
                        this.$refs.dataTable.doLayout()
                    })
                }
            })
        }
    }
}
</script>

监听到已选择和未选择的列,调用doLayout()方法对表格进行重绘。

最终效果:

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

(0)

相关推荐

  • Vue实现动态控制表格列的显示和隐藏

    本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码,供大家参考,具体内容如下 效果如图: 表头标题是重复的.为了能看到滚动效果 v-if=“lists[0].ispass” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示.取消勾选隐藏.默认勾选 <el-dropdown :hide-on-click="false">             <i class="iconfont icon-shaixuan" ></i

  • vue实现动态控制el-table表格列的展示与隐藏

    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <template>     <div class="page">         <el-popover width="60" trigger="click">             <el-checkbox-group v-model=&

  • vue+elementui实现动态控制表格列的显示和隐藏

    vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏,供大家参考,具体内容如下 imdex.vue <template>   <div>     <div>       <el-table :data="tableData" border style="width: 100%" ref="table">         <el-table-column prop=&q

  • vue项目中将element-ui table表格写成组件的实现代码

    表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"> <el-table-column type="index" align="cente

  • Vue业务组件封装Table表格示例详解

    目录 前言 Table组件介绍 Table组件封装思路 了解element Table组件代码 Table组件如何去封装 新建LTable组件 配置文件 配置插槽 动态组件 解决插槽存在的问题 代码实现 总结 前言 这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路.注:都是基于element ui进行二次封装. 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信.利用插槽.组件等去增加组件的可扩展性和复用性. Table组件介绍 用

  • vue实现动态控制表格列的显示隐藏

    本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码,供大家参考,具体内容如下 一.效果 如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏 二.代码 1.HTML部分 <template>   <div id="app">     <el-table :data="tableData" border style="width: 100%" ref="t

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

  • vue element table表格相同名称列合并方式

    目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

随机推荐