Checkbox 多选框 vue3

原创已于 2023-04-13 11:48:03 修改 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

于 2023-04-11 18:06:35 首次发布

vue 专栏收录该内容

53 篇文章

订阅专栏

该代码示例展示了如何在Vue中使用模板语法和v-for循环创建一个多级复选框结构。点击父级复选框时，会切换其所有子项的状态；点击子级复选框则单独操作。同时，有函数用于初始化复选框状态，根据给定的ID列表设置复选框选中状态。

<template>
  <div class="home">
   
    <div v-for="(item, index) in arr" :key="index" style="display: flex" @click.stop="shuBut(index)">
      <a-checkbox v-model:checked="item.checked">
        {{ item.label }}
      </a-checkbox>
      <div v-for="(i, ind) in item.child" :key="ind" style="display: flex" @click.stop="BUt2(index, ind)">
        <a-checkbox v-model:checked="i.checked">
          {{ i.label }}
        </a-checkbox>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {  ref } from 'vue';


const lis = [
  {
    checked: false,
    id: 1,
    label: '测试1',
    child: [
      {
        checked: false,
        id: 7,
        label: '孩子1',
      },
      {
        checked: false,
        id: 9,
        label: '孩子2',
      },
    ],
  },
  {
    checked: false,
    id: 2,
    label: '测试2',
    child: [
      {
        checked: false,
        id: 5,
        label: '孩子1',
      },
      {
        checked: false,
        id: 4,
        label: '孩子2',
      },
    ],
  },
];
const arr = ref([...lis]);

const shuBut = (index) => {
  console.log();
  arr.value[index].child.forEach((item) => {
    item.checked = !arr.value[index].checked;
  });
  console.log(arr.value[index].child);
};

const BUt2 = (index, ind) => {
  console.log(index, ind);
};
</script>

获取值的时候这样写
onMounted(() => {
  onlode();
});
const ist = '1,5';
const onlode = () => {
  const newARR = ist.split(',');
  newARR.map((oppo) => {
    arr.value.forEach((item, index) => {
      if (item.id == Number(oppo)) {
        item.checked = true;
        item.child.forEach((i, sum) => {
          i.checked = true;
        });
      } else {
        if (!item.checked) {
          item.checked = false;
          item.child.forEach((i, sum) => {
            if (i.id == Number(oppo)) {
              i.checked = true;
            } else {
              i.checked = false;
            }
          });
        }
      }
    });
  });
};