工作308:控制change
<div class="container" style="text-align: left;margin-top: 20px;margin-left: 10%" ><!--双向绑定数据checkedData 加入多选框的样式绑定的是checkData的数据 本次位置是一个数组 当其中选择的数值发生变化的时候 会触发对应的方法 --><el-checkbox-group v-model="checkedData" @change="handleCheckedDataChange"><!--循环遍历得到每一个数据 传入data的每一个数据--><el-checkbox v-for="acc in data" :label="acc" :key="acc.id" style="margin-left: 5px;margin-top: 20px"><!-- <el-checkbox v-for="acc in data" :label="acc" :key="acc.id">--><el-cardshadow="hover"class="card-container"style="display: flex;justify-content: center"><!-- <div class="avatar-img"><!– <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>–><!– <el-avatar :src="acc.dAvatar" alt="image" />–></div>--><div style="display: flex;justify-content: left;align-items: center"><div style="display: flex;flex-direction: column;font-size: 12px;justify-content: center"><div style="display: flex;justify-content: left"><div style="margin-top: 10px;margin-right: 20px"><h1 style="font-size: 12px;">{{ acc.name }}</h1><p style="font-size: 12px;margin-top: 2px;">{{ acc.departmentName }}</p></div><div style="display: flex;flex-direction: column;justify-content: left;text-align: center"><div style="font-size: 12px;background-color: #ccc;">{{ acc.platform }}</div><p style="font-size: 12px;">刊例价:¥{{ acc.price }}</p><p style="font-size: 12px">平均播放量:{{ acc.avg_view==null?0:acc.avg_view }} </p><p style="font-size: 12px">粉丝数:{{ acc.num_fan==null?0:acc.num_fan }}</p></div></div></div><!-- <div style="margin-left: 40px;"><input type="checkbox" name="running" :checked="checked" style="width: 20px;height: 20px"></div>--></div><!-- </div>--><!--<div class="gy-right"><div class="account-name"><span>{{ acc.platform }}</span></div>--><!--<div class="account-info"><p class="p-slide">刊例价:¥{{ acc.price }}</p><p class="p-slide">平均播放量:{{ acc.avg_view }} </p><p class="p-slide">粉丝数:{{ acc.num_fan }}</p></div>--></el-card></el-checkbox></el-checkbox-group></div></template><script>import {getAction} from "@/api";export default {name: "SelectAccount",// props: {// value: {// type: String | Number,// required: true// },// },model: {prop: "value",event: "change"},props: ['checkedData'],data() {return {selectStatus: [],data: null,/*双向绑定数据 双向数据绑定*/checkedData:[],checked:true};},mounted() {this.list();},methods: {/*向父组件传值*/// onSelect(data) {// this.$emit("seletct", data);// },/*test(){this.checked=!this.checked},*/list() {getAction('/account/list').then(res => {/*定义一个list数组*/var list = [];/*定义一个字符串对象*/var data = '';for (var i = 0; i < res.data.length; i++) {/*创建数组{"id": "1","name": "Hi苏州","num_fan": null,"avg_view": null,"platform": "今日头条","department_id": "1","column": null,"price": "111.00","department_name": "ddd1"},*/data = {/*任务id*/id: res.data[i].id,/*账号名称*/name: res.data[i].name,/*粉丝数*/num_fan: res.data[i].num_fan,/*平均播放量*/avg_view: res.data[i].avg_view,/*账号类型*/platform: res.data[i].platform,/*部门id*/department_id: res.data[i].department_id,column:res.data[i].column,/*刊价比*/price: res.data[i].price,/*部门名称*/departmentName: res.data[i].department_name,/*暂时写死的两个字段 后续可注释*/pAvatar: "./logo.png",dAvatar: "./logo.png"}list.push(data);}/*赋值给data*/this.data = list;})},/*父子组件传值 通过select的属性进行传值*/handleCheckedDataChange(val){console.log(111)/*触发父亲组件的方法 冰进行传值*/this.checked=!this.checkedconsole.log(this.checked)this.$emit("seletct", val);}}};
</script><style lang="scss" scoped>
*{margin: 0;padding: 0;
}
.card-container{width: 300px;height: 100px;padding: 0px;
}
.card-container:hover{border: 2px solid mediumturquoise;
}
.card-container:active{border: 2px solid red;
}h1{font-size: 14px;text-align: center;}
p{font-size: 14px;text-align: center;}
.p-slide{font-size: 14px;margin-top: 15px;
}
</style>
工作308:控制change相关推荐
- 8255A的工作方式控制字
北京交通大学戴胜华老师MOOC微机原理与接口技术 8255A的工作方式控制字,设置工作方式0方式1方式2 B口4种方式,方式1有选通信号,方式0是无条件的输入输出方式(程序控制方式)没有选通信号 PC ...
- stm32 定时器输出PWM原理及工作原理+控制舵机
1.PWM的工作原理 2.PWM的内部运作机制 3.PWM的模式 模块一 边沿对齐模式 模块二 中央对齐模式 4.自动加载的预加载寄存器 5.定时器输出PWM结构体讲解 6.定时器输出PWM库函数讲 ...
- 工作387-vant控制日期范围
<van-cell-group><van-switch-cell size="26px" :active-value="active" act ...
- 工作221:控制弹出框不全屏
<el-dialog :title="fullTitle" width="80%" :fullscreen="false" :clos ...
- 工作308:uni-设置请求参数
// 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分) //上传图片 let uploadUrl = '/uploadFile/file';//登录相关 let loginU ...
- 工作279:控制退回的逻辑修改
this.$confirm('你正在进行退回操作', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).t ...
- 工作109:控制mode跳转
- 基于Quartus II软件的FPGA综合实验——多功能数字钟
有很多自制元器件,内部电路附在文章中 文章目录 前言 一.设计要求 二.设计原理 三.设计过程 1.数码管扫描模块 2.计时模块 3.闹钟模块 4.闹钟响铃模块 5.数码管显示模块 6.整点报时功能 ...
- RFID系统的基本工作原理
文章目录 1. RFID的定义 2. RFID与条码技术相比有哪些优势 3. RFID标签的分类 4. RFID系统的基本工作原理 4.1 RFID系统的组成 4.2 RFID标签的组成 4.3 RF ...
最新文章
- chrome浏览器不能录音:Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined解决方法
- C++ ## ... 实用
- squid 服务器的应用
- java 内核驱动程序_内核第三讲,进入ring0,以及编写第一个内核驱动程序.
- android 拖动进度,Android 可拖动的seekbar自定义进度值
- 【Dism++ 最新版 官网 下载地址,(如旧Dism++地址失效),绿色清洁管理电脑工具】
- 计算机自动化考试试题,计算机等级考试,办公自动化考试试题(一).doc
- QQ、淘宝、阿里旺旺在线网页链接代码及详解 很实用
- vue组件库开发(npm包发布)
- IE浏览器异常,无法正常使用,如何修复?
- 浏览器刷新vue为什么不会走beforeDestroy和destroyed生命周期
- IT、TT、TN系统,你真的了解吗?
- Scratch制作贪吃蛇
- 电脑知识:笔记本电脑边充电边用,对电池有损害吗?
- Android输入法window类型,android输入法windowSoftInputMode属性详解章
- 7-152 百钱百鸡
- 没错,我们和美帝的差距就是这么大!
- eNSP配置静态路由实例
- centos开启防火墙端口
- 9.1总结前日(数学+图论)
热门文章
- 数据科学领域有哪些技术_领域知识在数据科学中到底有多重要?
- python + selenium 搭建环境步骤
- linux 命令/目录 名称 英文单词 缩写 助记
- 开灯问题---------简单模拟
- 程序员的职业素养文摘
- [MM9]复制格式的快捷操作
- 【翻译】eXpressAppFramework QuickStart 业务模型设计(十)——在代码中实现数据验证...
- matlab 万能,matlab 万能实用的线性曲线拟合方法
- aref无效 lisp_aref无效 lisp_Common Lisp专题4:数组
- 华为云hcip认证试题_首信AAA认证计费系统通过华为云兼容性认证,成为华为认证级ISV伙伴...