前端工作总结276-控制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-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>