Element实现击表头控制表格列显隐

最新推荐文章于 2024-07-26 08:15:00 发布

李好帅啊

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量589

点赞数 1

分类专栏： vue.js+element 前端文章标签：前端 vue.js+element 表格

本文链接：https://blog.csdn.net/nefu1234/article/details/89354798

版权

本文介绍了如何利用Element UI库在Vue.js应用中实现表格列的显隐控制。通过在表头添加点击事件，结合内部状态变量，可以轻松控制如销售模块（q1sum）等列的展示与隐藏，从而提升表格的交互体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述
点击+号展开表格

实现步骤：
1. 表格里加入加号减号图标

        <el-table-column
            prop="q1sum"
            label="Q1"                                                       
            >
            <template slot="header">
                    <div>
                        <span>Q1</span>
                        <i :class="this.saleShowQ1?'el-icon-minus':'el-icon-plus'" style="color:#409eff;margin-left:15px;"></i>
                    </div>
                </template>
        </el-table-column>
        <el-table-column
            v-if="saleShowQ1"
            prop=&