Vue实现用户自定义字段显示数据的方法
更新时间：2018年08月28日 10:48:14 作者：codingNoob
今天小编就为大家分享一篇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>
以上这篇Vue实现用户自定义字段显示数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了关于element Drawer抽屉的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue实现图片按比例缩放问题操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文主要介绍了Vite性能优化之分包策略的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了基于vue3 vue-cli4 线上部署及优化的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
Vue无法读取HTMLCollection列表的length问题解决
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解基于Vue/React项目的移动端适配方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果,下面这篇文章主要给大家介绍了关于Vue实用功能之实现拖拽元素、列表拖拽排序的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue基础知识快速入门教程,我们可以先学会用，使用一段时间之后，回头来熟悉一下Vue框架以及它的特点,需要的朋友可以参考下2023-05-05
最新评论