element表格过多隐藏功能

这个表格因为字段过多出现的横向滚动条，我这里没有采用官网固定表头或者表尾。

选择用这些字段点击控制某些字段表格的显示隐藏

这里的列表选择后端给的接口

{"state":10001,"msg":"ok","data":{"编号":false,"合同编号":false,"对方单位":false,"合同名称":false,"签订日期":false,"合同金额":false,"支付情况":false,"支付完成时间":false,"对方联系人":false,"对方联系电话":false,"公司经办人":false,"公司经办人电话":false,"添加时间":false,"添加人":false,"应履行时间":false,"服务期结束时间":true,"实际履行时间":true,"应履行数量":true,"实际履行数量":true,"应履行金额":true,"实际履行金额":true,"合同数量":true},"dataList":[{"id":36,"name":"编号","state":false},{"id":37,"name":"合同编号","state":false},{"id":38,"name":"对方单位","state":false},{"id":39,"name":"合同名称","state":false},{"id":40,"name":"签订日期","state":false},{"id":41,"name":"合同金额","state":false},{"id":42,"name":"支付情况","state":false},{"id":43,"name":"支付完成时间","state":false},{"id":44,"name":"对方联系人","state":false},{"id":45,"name":"对方联系电话","state":false},{"id":46,"name":"公司经办人","state":false},{"id":47,"name":"公司经办人电话","state":false},{"id":48,"name":"添加时间","state":false},{"id":49,"name":"添加人","state":false},{"id":55,"name":"应履行时间","state":false},{"id":56,"name":"服务期结束时间","state":true},{"id":57,"name":"实际履行时间","state":true},{"id":58,"name":"应履行数量","state":true},{"id":59,"name":"实际履行数量","state":true},{"id":60,"name":"应履行金额","state":true},{"id":61,"name":"实际履行金额","state":true},{"id":62,"name":"合同数量","state":true}]}

其中对象用来循环显示，state用来进行初始化字段是显示还是隐藏

 <el-dropdown trigger="click" style="margin-left:10px">
                            <span class="el-dropdown-link">
                                显示字段<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <div class="chezj" style="padding:0 10px;">
                                    <el-checkbox v-for="(list,index) in SHowLsit" v-model="list.state" @change="dianshow(list,index)">{{list.name}}</el-checkbox>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>

这里我用的是element的下来菜单和Checkbox 多选框

 dianshow(item, index) {
                    let that = this
                    axios.get('/111111113', {
                        params: {
                            action: '2222222o',
                            paras: JSON.stringify({
                                lanmu: 2,
                                id: item.id,
                                state: item.state == true ? 1 : 0,
                            })

                        }
                    })
                    .then(function (res) {
                        if (res.data.state == 10001) {
                            that.ShowIs[item.name] = item.state == true ? true : false;
                        }

                    })
                    .catch(function (err) {
                        console.log(err)
                    });

                },

这里是请求接口来改变显示隐藏，

v-if是根据给口提供的

true还是false来控制显示还是隐藏

这里是请求的接口获取的每个字段显示还是隐藏