<template>
  <div>
    <p>选择效果</p>
    <el-checkbox v-model="checkAll" @change="selectall">全选</el-checkbox>
    <div style="margin: 15px 0"></div>

    <el-checkbox-group v-model="checkedlist" @change="selectone" >
      <el-checkbox v-for="(i, j) in list" :label="i.pri" :key="j">{{
        i.name
      }}</el-checkbox>
    </el-checkbox-group>

    <p>总价：{{ zong }}</p>
  </div>
</template>

<script>
export default {
  name: "qaq",
  data() {
    return {
      checkAll: false,
      checkedlist: [],
      list: [
        { name: "aaa", pri: 30 },
        { name: "bbb", pri: 40 },
        { name: "ccc", pri: 50 },
      ],
      zong: 0,
      isIndeterminate: true,
    };
  },
  methods: {
    selectall(val) {
      console.log(val);
      //   this.checkedlist = val ? this.list : [];
      this.checkedlist = [];
      this.zong = 0;
      if (val) {
        for (let i in this.list) {
          this.checkedlist.push(this.list[i].pri);
          this.zong = this.zong + this.list[i].pri;
        }
        console.log(this.checkedlist);
      } else {
        this.zong = 0;
      }
    },
    selectone(e) {
        // console.log(e)
        this.zong=0
        for(let i in e){
            console.log(e[i])
            this.zong=this.zong+e[i]
        }
    },
  },
};
</script>

<style>
</style>