element表格自动表头显示隐藏

最新推荐文章于 2024-08-29 15:17:24 发布

南玖i

最新推荐文章于 2024-08-29 15:17:24 发布

阅读量734

点赞数

分类专栏： vue element 文章标签： vue elementui

本文链接：https://blog.csdn.net/m0_49789433/article/details/115308336

版权

vue 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

element

19 篇文章 0 订阅

订阅专栏

要实现效果表格点击多选框点哪个哪个隐藏
在这里插入图片描述

整个代码

<template>
    <div >
        <div >
            <div >
            //这个是多选框的内容
                <el-popover
                >
                    <el-checkbox-group v-model="checkList">
                    //通过循环表头拿到多选框内容
                        <el-checkbox :label="item.name" v-for="(item, i) in tableData.fields" :key="i"
                                     style="display: block;" checked></el-checkbox>
                    </el-checkbox-group>
                    //下面是我直接用的element里面的图标class="el-icon-document-copy"这个是图标
                    <div class="el-icon-document-copy" slot="reference"></div>
                </el-popover>
            </div>
            <br>
            //element的表格
            <el-table
                :data="tableData.tableData"
                border style="width: 120%;margin-top: 20px; "
            >
            //这个是表格左边的多选框
                <af-table-column type="selection"></af-table-column>
                // :label="item.name"  这里的name就是中文表头
                //  :prop="item.id"    prop是数据，链接我第二个tableData里面的数据
                <af-table-column  
                                 v-for="(item,index) in tableData.fields"
                                 :key="index"
                                 :label="item.name"
                                 :prop="item.id"
                             
                >
                </af-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
        //tableData是一个大对象
            tableData: {
           //这个fields是表头id用来绑定内容name是表头的中文
                fields: [
                    {
                        id: "areaUnicode",
                        name: "第一个"
                    },
                    {
                        id: "areaName",
                        name: "第二个"
                    },
                    {
                        id: "houseUnicode",
                        name: "第三个"
                    }, {
                        id: "houseName",
                        name: "第四个"
                    },
                    {
                        id: "areaAttr",
                        name: "第五个"
                    },
                    {
                        id: "areaStatus",
                        name: "第六个"
                    },

                ],
                //这个里面是我根据上面id绑定下面的数据，上面的id的值=下面键值对的键
                tableData: [
                    {
                        areaUnicode: "内容",
                        areaName: "内容",
                        houseUnicode: "内容"
                    },
                    {
                        areaUnicode: "内容",
                        areaName: "内容",
                        houseUnicode: "内容"
                    },
                    {
                        areaUnicode: "内容",
                        areaName: "内容",
                        houseUnicode: "内容"
                    }, {
                        areaUnicode: "内容",
                        areaName: "内容",
                        houseUnicode: "内容"
                    },

                ],
            },
            //这个用来存放多选框的选项
            checkList: [],
        }
    },

}
</script>