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


Posted in Javascript onAugust 28, 2018

如下:

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实现用户自定义字段显示数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 #Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 #Javascript
You might like
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python元组操作实例解析
2014/09/23 Python
Python面向对象之继承代码详解
2018/01/29 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
护士自我推荐信范文
2015/03/24 职场文书
2015年采购员工作总结
2015/04/27 职场文书
工作会议简报
2015/07/20 职场文书
大学生党课感想
2015/08/11 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS