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

你的名字 2022-09-11 07:29 222阅读 0赞

# 效果图 #

![20210914144329626.gif][]

#  主要代码实现 #

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

[20210914144329626.gif]: /images/20220828/61441c1bc65548908e1f57f0309778f8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 自定义复选框/单选框

插件地址：[https://ext.dcloud.net.cn/plugin?id=717][https_ext.dcloud.net.cn_plugin_id_717]...

旧城等待，/ 2024年04月17日 21:47/ 0 赞/ 56 阅读

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

效果图 ![20210914144329626.gif][] 主要代码实现 <div class="isck" @click="btnCheck(ite

你的名字/ 2022年09月11日 07:29/ 0 赞/ 223 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 242 阅读

相关 jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法

html代码如下所示： <div> <label>

本是古典何须时尚/ 2022年06月05日 01:26/ 0 赞/ 279 阅读

相关 js_案例_复选框全选功能

复选框全选功能 <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label>

ゝ一世哀愁。/ 2022年05月25日 05:47/ 0 赞/ 217 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 317 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 269 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 453 阅读

相关 destoon后台自定义字段复选框多选框增加全选全不选按钮

![这里写图片描述][SouthEast] 修改include/fields.func.php 中的函数function fields\_show() 在177行

柔情只为你懂/ 2021年09月26日 13:56/ 0 赞/ 327 阅读

相关 JavaScript 复选框全选功能案例

功能描述实现一个多栏目复选框的全选，全不选和反选功能。 ![在这里插入图片描述][20190418123707102.png] 分析 HTML页面：四

Love The Way You Lie/ 2021年06月24日 16:10/ 0 赞/ 526 阅读