Vue中自定义列表复选框和全选框-案例

Posted 2021-10-03 JackieDYH

效果图

 主要代码实现

<div class="isck" @click="btnCheck(item)">
	<img
	  v-show="item.isCheck"
	  class="opt"
	  src="@/assets/images/btn/btn_opt_s_r_p.png"
	/>
	<img
	  v-show="!item.isCheck"
	  class="opt"
	  src="@/assets/images/btn/btn_opt_s_r_t.png"
	/>
</div>

<script>
export default {
  name: "FarmMain",
  data() {
    return {
      isAllCheck: false, // 全选
      myGoodsList: [
        {
          id: 1000566,
          image:"",
          name: "NMSL121",
          isCheck: false,
        },
        {
          id: 10005667,
          image:"",
          name: "NMSL122",
          isCheck: false,
        },
        {
          id: 10005665,
          image:"",
          name: "NMSL123",
          isCheck: false,
        },
      ],
    };
  },
  methods: {
    // 全选
    allbtnCheck() {
      this.isAllCheck = !this.isAllCheck;
      this.myGoodsList.forEach((item, index) => {
        item.isCheck = this.isAllCheck;
      });
    },
    // 单选
    btnCheck(item) {
      item.isCheck = !item.isCheck;

      let flag = this.myGoodsList.every((item) => {
        return item.isCheck == true;
      });
      this.isAllCheck = flag;
    },
  },
};
</script>