前端工作总结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">
           &lt;!&ndash;  <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>&ndash;&gt;
                  &lt;!&ndash; <el-avatar :src="acc.dAvatar" alt="image"  />&ndash;&gt;
           </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>