网站管理系统后台,无限空间 网站,陕西 汽车 网站建设,域名138查询网div classcontainer styletext-align: left;margin-top: 20px;margin-left: 10% !--双向绑定数据checkedData 加入多选框的样式绑定的是checkData的数据 本次位置是一个数组 当其中选择的数值发生变化的时候 会触发对应的方法 --e…div classcontainer styletext-align: left;margin-top: 20px;margin-left: 10% !--双向绑定数据checkedData 加入多选框的样式绑定的是checkData的数据 本次位置是一个数组 当其中选择的数值发生变化的时候 会触发对应的方法 --el-checkbox-group v-modelcheckedData changehandleCheckedDataChange!--循环遍历得到每一个数据 传入data的每一个数据--el-checkbox v-foracc in data :labelacc :keyacc.id stylemargin-left: 5px;margin-top: 20px!-- el-checkbox v-foracc in data :labelacc :keyacc.id--el-cardshadowhoverclasscard-containerstyledisplay: flex;justify-content: center!-- div classavatar-imglt;!ndash; spanimg :srcacc.pAvatar altimage classmedia-img //spanndash;gt;lt;!ndash; el-avatar :srcacc.dAvatar altimage /ndash;gt;/div--div styledisplay: flex;justify-content: left;align-items: centerdiv styledisplay: flex;flex-direction: column;font-size: 12px;justify-content: centerdiv styledisplay: flex;justify-content: leftdiv stylemargin-top: 10px;margin-right: 20pxh1 stylefont-size: 12px;{{ acc.name }}/h1p stylefont-size: 12px;margin-top: 2px;{{ acc.departmentName }}/p/divdiv styledisplay: flex;flex-direction: column;justify-content: left;text-align: centerdiv stylefont-size: 12px;background-color: #ccc;{{ acc.platform }}/divp stylefont-size: 12px;刊例价:{{ acc.price }}/pp stylefont-size: 12px平均播放量{{ acc.avg_viewnull?0:acc.avg_view }} /pp stylefont-size: 12px粉丝数{{ acc.num_fannull?0:acc.num_fan }}/p/div/div/div!-- div stylemargin-left: 40px;input typecheckbox namerunning :checkedchecked stylewidth: 20px;height: 20px/div--/div!-- /div--!--div classgy-rightdiv classaccount-namespan{{ acc.platform }}/span/div--!--div classaccount-infop classp-slide刊例价¥{{ acc.price }}/pp classp-slide平均播放量{{ acc.avg_view }} /pp classp-slide粉丝数{{ acc.num_fan }}/p/div--/el-card/el-checkbox/el-checkbox-group/div/templatescriptimport {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);}}};
/scriptstyle langscss 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