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 delete操作符应用实例
Jan 13 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
Element Dialog对话框的使用示例
Jul 26 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
javascript 必知必会之closure
2009/09/21 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
会话Bean的种类
2013/11/07 面试题
会计自我鉴定范文
2013/10/06 职场文书
军训的自我鉴定
2013/12/10 职场文书
西式结婚主持词
2014/03/14 职场文书
妇联主席先进事迹
2014/05/18 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
城南旧事观后感
2015/06/11 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
银行培训心得体会范文
2016/01/09 职场文书
高三数学教学反思
2016/02/18 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
cypress测试本地web应用
2022/06/01 Javascript