Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
更新時間：2018年08月28日 10:48:14 作者：codingNoob
今天小編就為大家分享一篇Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下：
代碼：
<!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實現(xiàn)自定義字段數(shù)據(jù)</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">所屬地區(qū)</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">數(shù)學</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>所屬地區(qū)</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>數(shù)學</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">凍結(jié)</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)
},
//編輯選項內(nèi)容
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實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
分布式搜索和全文搜索在現(xiàn)代應用程序中變得越來越重要,因為它們可以幫助用戶快速查找和檢索大量數(shù)據(jù),Elasticsearch是一種強大的分布式搜索引擎,本文將介紹如何在Vue.js應用程序中實現(xiàn)分布式搜索和全文搜索,以及如何與Elasticsearch集成,需要的朋友可以參考下2023-11-11
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
淺析vue-router中params和query的區(qū)別
這篇文章主要介紹了vue-router中params和query的區(qū)別，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue的核心思想就是組件，什么是組件呢？按照我的理解組件就是裝配頁面的零件，vue三大核心組件 路由 狀態(tài)管理，路由控制頁面的渲染，頁面由組件組成，數(shù)據(jù)有vuex進行管理和改變。下面我會以一個簡單的案例來說2017-04-04
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
關(guān)于nuxt?store中保存localstorage的問題
這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼
本篇文章主要介紹了vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了Vue使用electron生成桌面應用過程，很想使用 electron 制作一個桌面應用，但是真的上手使用的時候才發(fā)現(xiàn) electron 的坑實在是太多了，先將遇到的坑記錄在這里，遇到一個記錄一個2023-04-04
這篇文章主要介紹了vue如何解決代碼需要在dom渲染之后執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10