返回

前端工作总结276-控制change

发布时间:2023-12-11 21:09:57 321
<div class="container" style="text-align: left;margin-top: 20px;margin-left: 10%" >

<el-checkbox-group v-model="checkedData" @change="handleCheckedDataChange">

<el-checkbox v-for="acc in data" :label="acc" :key="acc.id" style="margin-left: 5px;margin-top: 20px">

<el-card
shadow="hover"
class="card-container"
style="display: flex;justify-content: center"
>

<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>



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.checked
console.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>
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
前端工作总结262-时间戳转换问题 2023-12-11 18:09:00