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 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
php4的session功能评述(三)
2006/10/09 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
对比分析json及XML
2014/11/28 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
原生JavaScript实现随机点名表
2021/01/14 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
十一个高级MySql面试题
2014/10/06 面试题
就业自荐书
2013/12/05 职场文书
市场营销求职信范文
2014/02/21 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
自主招生英文自荐信
2015/03/25 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
SQL Server中锁的用法
2022/05/20 SQL Server