如下：
代碼：
<!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>以上這篇Vue實現用戶自定義字段顯示數據的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
