没有合适的资源?快使用搜索试试~ 我知道了~
首页Vue实现用户自定义字段显示数据的方法
资源详情
资源评论
资源推荐
Vue实现用户自定义字段显示数据的方法实现用户自定义字段显示数据的方法
今天小编就为大家分享一篇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>
weixin_38661128
- 粉丝: 4
- 资源: 887
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2022年中国足球球迷营销价值报告.pdf
- 房地产培训 -营销总每天在干嘛.pptx
- 黄色简约实用介绍_汇报PPT模板.pptx
- 嵌入式系统原理及应用:第三章 ARM编程简介_3.pdf
- 多媒体应用系统.pptx
- 黄灰配色简约设计精美大气商务汇报PPT模板.pptx
- 用matlab绘制差分方程Z变换-反变换-zplane-residuez-tf2zp-zp2tf-tf2sos-sos2tf-幅相频谱等等.docx
- 网络营销策略-网络营销团队的建立.docx
- 电子商务示范企业申请报告.doc
- 淡雅灰低面风背景完整框架创业商业计划书PPT模板.pptx
- 计算模型与算法技术:10-Iterative Improvement.ppt
- 计算模型与算法技术:9-Greedy Technique.ppt
- 计算模型与算法技术:6-Transform-and-Conquer.ppt
- 云服务安全风险分析研究.pdf
- 软件工程笔记(完整版).doc
- 电子商务网项目实例规划书.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0