iview 动态调整 表格密度和 表格列数据表头展示

<template>
    <div class="workplace">
        <div class="search">
            <div style="left:0px;top:0px;width:100%;background:white;padding:10px" :style="{position:position,height:height,'z-index':zIndex}">
                <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80" inline>
                    <FormItem prop="user" label="用户名">
                        <Input type="text" v-model="formInline.user" placeholder="请输入用户名" />
                    </FormItem>
                    <FormItem prop="password" label="手机号">
                        <Input type="text" v-model="formInline.password" placeholder="手机号" />
                    </FormItem>
                    <FormItem prop="email" label="邮箱">
                        <Input type="text" v-model="formInline.email" placeholder="邮箱" />
                    </FormItem>
                    <FormItem prop="user" label="用户名">
                        <Input type="text" v-model="formInline.user" placeholder="请输入用户名" />
                    </FormItem>
                    <FormItem prop="password" label="手机号">
                        <Input type="text" v-model="formInline.password" placeholder="手机号" />
                    </FormItem>
                    <FormItem prop="email" label="邮箱">
                        <Input type="text" v-model="formInline.email" placeholder="邮箱" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
                    </FormItem>
                </Form>
                <div class="flexBetween">
                    <Button type="primary" ghost><Icon type="md-add" />添加用户</Button>
                    <div>
                        <Dropdown trigger="click" @on-click="miduClick">
                            <a href="javascript:void(0)" style="margin-right:10px">
                                <Tooltip content="密度" placement="top">
                                    <Icon type="md-list" size="23" />
                                </Tooltip>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem name="tabledefault">默认</DropdownItem>
                                <DropdownItem name="tablekuan">宽松</DropdownItem>
                                <DropdownItem name="tablejin">紧凑</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <span style="margin-right:10px" v-if="position=='relative'">
                                <Tooltip content="全屏" placement="top">
                                    <Icon type="md-qr-scanner" size="23" @click="fullScreen"/>
                                </Tooltip> 
                            </span>
                        <span style="margin-right:10px" v-if="position=='fixed'">
                                <Tooltip content="退出全屏"  placement="top">
                                    <Icon type="md-contract" size="23" @click="fullScreenOut"/>
                                </Tooltip> 
                            </span>
                        <span style="margin-right:10px">
                                <Tooltip content="刷新"  placement="top">
                                    <Icon type="md-refresh" size="23" />
                                </Tooltip> 
                            </span>
                        <Dropdown trigger="click">
                            <a href="javascript:void(0)" style="margin-right:10px">
                                <Tooltip content="列设置" placement="top">
                                    <Icon type="md-options" size="23" />
                                </Tooltip>
                            </a>
                            <DropdownMenu slot="list">
                                <div>
                                    <CheckboxGroup v-model="keysCon">
                                        <div style="font-size:16px;padding:7px;color:black" v-for="item in keysSelectCon">
                                            <Checkbox :label="item.key">
                                                <span>{{item.title}}</span>
                                            </Checkbox>
                                        </div>
                                    </CheckboxGroup>
                                </div>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </div>

                <div style="margin-top:20px;" :style="{position:position,height:height}">
                    <Table :class="[tableClass]" border :columns="columns1" :data="data1"></Table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "Redirect",

    data() {
        return {
            height: '',
            position: 'relative',
            tableClass: "",
            zIndex:1,
            keysCon: [],
            keysSelectCon: [],
            columns1: [{
                    title: '姓名',
                    key: 'name'
                },
                {
                    title: '年龄',
                    key: 'age'
                },
                {
                    title: '地址',
                    key: 'address'
                },
                {
                    "title": "班级",
                    "key": "weak",
                },
                {
                    "title": "课程",
                    "key": "signin",
                },
                {
                    "title": "上班",
                    "key": "click",
                },
                {
                    "title": "下班",
                    "key": "active",
                },
            ],
            data1: [{
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                }
            ],
            formInline: {
                user: '',
                password: '',
                email: ''

            },
            ruleInline: {
                // user: [
                //     { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                // ],
                // password: [
                //     { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                //     { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                // ]
            }
        };
    },
    created() {
        var that = this;
        this.keysSelectCon = JSON.parse(JSON.stringify(this.columns1))
        this.keysSelectCon.forEach((item) => {
            this.keysCon.push(item.key)
        })
    },
    watch: {
        keysCon(val) {
            let arr = [];
            this.keysSelectCon.forEach((item) => {
                val.forEach((key) => {
                    if (item.key == key) {
                        arr.push(item)
                    }
                })
            })
            this.columns1 = arr;
        }
    },
    methods: {
        fullScreen() {
            this.position = "fixed";
            this.utils.commonTool.fullScreen();
            this.height = window.innerHeight + 'px'
            this.zIndex=9999999
        },
        fullScreenOut() {
            this.position = "relative";
            this.utils.commonTool.exitFullscreen();
            this.height = ''
            this.zIndex=1
        },
        miduClick(name) {
            this.tableClass = name
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            })
        }
    },
};
</script>

<style scoped>
.search {
    background: white;
    padding: 20px;
}
</style>