源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-8-28 10:48:15 | 显示全部楼层 |阅读模式
今天小编就为大家分享一篇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){
            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实现用户自定义字段显示数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

回复

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2022-8-30 06:18:19 | 显示全部楼层
还有人在不。。。。。。。。。。啊
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2022-11-18 20:56:32 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-10 15:52:35 | 显示全部楼层
问问问企鹅哇哇哇哇哇
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-1-22 06:14:29 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2023-5-26 19:50:42 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

61

积分

注册会员

Rank: 2

积分
61
发表于 2023-6-24 03:47:18 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-2 00:35:29 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-12 14:06:31 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2024-3-31 07:21:41 | 显示全部楼层
逛逛看看瞧瞧
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 21:55 , Processed in 0.099160 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表