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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
轮播图组件js代码
Aug 08 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
浅谈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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python 实现生成均匀分布的点
2019/12/05 Python
python学生管理系统的实现
2020/04/05 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
公司捐款倡议书
2014/05/14 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
擅自离岗检讨书
2014/09/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
英雄儿女观后感
2015/06/09 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python