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

最新推荐文章于 2024-09-21 11:29:05 发布

JackieDYH

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量936

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 复选框

本文链接：https://blog.csdn.net/JackieDYH/article/details/120287243

版权

Vue 专栏收录该内容

336 篇文章 80 订阅

订阅专栏

效果图

主要代码实现

<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>