<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://www.jb51.net/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> <div> <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> <div> <span>编号</span> <span v-for="(item, index) in students">{{item.id}}</span> </div> <div> <span>姓别</span> <span v-for="(item, index) in students">{{item.sex}}</span> </div> <div> <span>身高</span> <span v-for="(item, index) in students">{{item.hight}}</span> </div> </div> <div> <div :style="{width: (length*100) + 'px'}"> <div v-show="field.weight"> <span>体重</span> <span v-for="(item, index) in students">{{item.weight}}</span> </div> <div v-show="field.inter"> <span>兴趣</span> <span v-for="(item, index) in students">{{item.inter}}</span> </div> <div v-show="field.schoold"> <span>学校</span> <span v-for="(item, index) in students">{{item.schoold}}</span> </div> <div v-show="field.district"> <span>所属地区</span> <span v-for="(item, index) in students">{{item.district}}</span> </div> <div v-show="field.class"> <span>所属年级</span> <span v-for="(item, index) in students">{{item.class}}</span> </div> <div v-show="field.math"> <span>数学</span> <span v-for="(item, index) in students">{{item.math}}</span> </div> <div v-show="field.chinese"> <span>语文</span> <span v-for="(item, index) in students">{{item.chinese}}</span> </div> <div v-show="field.english"> <span>英语</span> <span v-for="(item, index) in students">{{item.english}}</span> </div> </div> </div> <div> <div> <span>操作</span> </div> <div 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>
Vue实现用户自定义字段显示数据的方法
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/87ae36d7961336eb098fd31a8032da35.html