Vue实现用户自定义字段显示数据

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../lib/vue.min.js"></script>
    <style>
        .middle::-webkit-scrollbar {height:8px;}
        /* 滚动槽 */
        .middle::-webkit-scrollbar-track {border-radius: 10px;}
        /* 滚动条滑块 */
        .middle::-webkit-scrollbar-thumb {background: #ccc;}
        * {margin: 0;padding: 0;box-sizing:border-box;font-family: "微软雅黑";}
        #tabPanel{width:1100px;height:300px;margin:100px auto;}
        .left{float:left;height:300px;width:300px;font-size:0;}
        .left .item,.right .item,.middle .item{display:inline-block;width:100px;}
        .left .item span,.middle .item span,.left .item span{display:block;height:50px;text-align:center;line-height:50px;font-size:14px;border:1px solid #eee;}
        .right .item{width:200px;height:50px;line-height:50px;text-align:center;border:1px solid #eee;}
        .right .item span{display:inline-block;border:none;color:blue;text-decoration: underline;cursor:pointer;}
        .middle{float:left;height:300px;width:300px;font-size:0;overflow-x:scroll;overflow-y:hidden;}
        .right{float:left;height:300px;width:200px;}
        #tabPanel .chooseItem {padding:10px 0;}
        #tabPanel .chooseItem label{padding:0 10px;}
    </style>
    <title>Vue实现自定义字段数据</title>
</head>

<body>

    <div id="tabPanel">
        <div class="chooseItem">
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.weight">体重</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.inter">兴趣</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.schoold">学校</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.district">所属地区</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.class">所属年级</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.math">数学</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.chinese">语文</label>
            <label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.english">英语</label>
        </div>
        <div class="left">
            <div class="item">
                <span>编号</span>
                <span v-for="(item, index) in students">{{item.id}}</span>
            </div>
            <div class="item">
                <span>姓别</span>
                <span v-for="(item, index) in students">{{item.sex}}</span>
            </div>
            <div class="item">
                <span>身高</span>
                <span v-for="(item, index) in students">{{item.hight}}</span>
            </div>
        </div>
        <div class="middle">
            <div :style="{width: (length*100) + 'px'}">
                <div class="item" v-show="field.weight">
                    <span>体重</span>
                    <span v-for="(item, index) in students">{{item.weight}}</span>
                </div>
                <div class="item" v-show="field.inter">
                    <span>兴趣</span>
                    <span v-for="(item, index) in students">{{item.inter}}</span>
                </div>
                <div class="item" v-show="field.schoold">
                    <span>学校</span>
                    <span v-for="(item, index) in students">{{item.schoold}}</span>
                </div>
                <div class="item" v-show="field.district">
                    <span>所属地区</span>
                    <span v-for="(item, index) in students">{{item.district}}</span>
                </div>
                <div class="item" v-show="field.class">
                    <span>所属年级</span>
                    <span v-for="(item, index) in students">{{item.class}}</span>
                </div>
                <div class="item" v-show="field.math">
                    <span>数学</span>
                    <span v-for="(item, index) in students">{{item.math}}</span>
                </div>
                <div class="item" v-show="field.chinese">
                    <span>语文</span>
                    <span v-for="(item, index) in students">{{item.chinese}}</span>
                </div>
                <div class="item" v-show="field.english">
                    <span>英语</span>
                    <span v-for="(item, index) in students">{{item.english}}</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item">
                <span>操作</span>
            </div>
            <div class="item" v-for="(item, index) in students">
                <span @click="detail(item.id ,index)" :title="item.id">查看</span>
                <span @click="detail(item.id ,index)" :title="item.id">删除</span>
                <span @click="detail(item.id ,index)" :title="item.id">修改</span>
                <span @click="detail(item.id ,index)" :title="item.id">冻结</span>
            </div>
        </div>
    </div>
</body>
<script>
    var v = new Vue({
        el: "#tabPanel",
        data: {
            length: 3,
            field:{
                weight: true,
                inter: true,
                schoold: true,
                district: false,
                class: false,
                math: false,
                chinese: false,
                english: false
            },
            students:[{
                id: 1,
                name: 'zhangsan01',
                sex: '男',
                hight: '168cm',
                weight: '56kg',
                inter: '篮球1',
                schoold: '清华大学1',
                district: '湖南省1',
                class: '大学三年级1',
                math: '97',
                chinese: '98',
                english: '120'
            },{
                id: 2,
                name: 'zhangsan02',
                sex: '男',
                hight: '168cm',
                weight: '56kg',
                inter: '篮球2',
                schoold: '清华大学2',
                district: '湖南省2',
                class: '大学三年级2',
                math: '97',
                chinese: '98',
                english: '120'
            },{
                id: 3,
                name: 'zhangsan03',
                sex: '男',
                hight: '168cm',
                weight: '56kg',
                inter: '篮球3',
                schoold: '清华大学3',
                district: '湖南省3',
                class: '大学三年级3',
                math: '97',
                chinese: '98',
                english: '120'
            },{
                id: 4,
                name: 'zhangsan04',
                sex: '男',
                hight: '168cm',
                weight: '56kg',
                inter: '篮球4',
                schoold: '清华大学4',
                district: '湖南省4',
                class: '大学三年级4',
                math: '97',
                chinese: '98',
                english: '120'
            },{
                id: 5,
                name: 'zhangsan05',
                sex: '男',
                hight: '168cm',
                weight: '56kg',
                inter: '篮球5',
                schoold: '清华大学5',
                district: '湖南省5',
                class: '大学三年级5',
                math: '97',
                chinese: '98',
                english: '120'
            }]
        },
        methods: {
            //双击删除滑块
            del: function(index) {
                this.tabs.splice(index, 1);
                this.tabContents.splice(index, 1)
            },
            //编辑选项内容
            editContent: function(index, value) {
                this.tabContents[index] = value;
                console.log(this.tabContents);
            },
            chooseFile: function(){
                var val = this.field;
                //this.length = 0;
                for (i in val){
                    if(val[i]){
                        this.length = this.length + 1;
                    }
                    //console.log(val.lenght)
                }
                if(this.length > 8){
                    this.length = 8;
                }
                console.log(this.length);
            }
        },
        computed: {
            lengthb: function(){
                if(length > 6){
                    lengthb = 6
                }
            }
        },
        watch: {
            field: function(val){
                
                //console.log(this.field.lenght);
            }
        }
    });
</script>

</html>