开发者社区> 前端歌谣> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端工作总结276-控制change

简介: 前端工作总结276-控制change
+关注继续查看
福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

<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-card
                    shadow="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.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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端工作总结116-动态渲染数据 数据在数字字典里面
前端工作总结116-动态渲染数据 数据在数字字典里面
0 0
前端工作总结195-vue带参数跳转其他页面
前端工作总结195-vue带参数跳转其他页面
0 0
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
0 0
前端工作总结118-vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>
前端工作总结118-vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>
0 0
前端工作总结147-custom组件
前端工作总结147-custom组件
0 0
前端工作总结146-nexttick的使用
前端工作总结146-nexttick的使用
0 0
前端工作总结145-页面布局
前端工作总结145-页面布局
0 0
前端工作总结148-引用当前组件下面的方法是混入
前端工作总结148-引用当前组件下面的方法是混入
0 0
前端工作总结142-element上传组件时候的钩子--event里面有数据参数
前端工作总结142-element上传组件时候的钩子--event里面有数据参数
0 0
前端工作总结124-数组转换为对象项目案例
前端工作总结124-数组转换为对象项目案例
0 0
+关注
前端歌谣
csdn账号前端大歌谣/前端小歌谣 微信公众号关注前端小歌谣
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载


http://www.vxiaotou.com