uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예

WBOY
풀어 주다: 2022-06-22 11:57:51
앞으로
7298명이 탐색했습니다.

이 글에서는 다중 선택 상자의 전체 선택 기능 구현과 관련된 문제를 주로 정리한 uniapp에 대한 관련 지식을 제공합니다. 전체 선택 기능을 구현할 수 없는 이유는 체크박스는 동적으로 수정되며, 인터페이스 상태는 실시간으로 변경될 수 있지만 체크박스 그룹의 변경 이벤트는 트리거될 수 없습니다. 모두에게 도움이 되기를 바랍니다.

uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예

추천: "uniapp tutorial"

uniapp에 내장된 checkboxcheckbox-group은 실제로 꽤 훌륭하지만 두 가지 문제가 있습니다: checkbox其实以及checkbox-group本来挺好的,但是有两个问题:

  1. 无法依赖其事件实现全选
  2. 样式固定,难以修改

他们无法实现全选的原因是:
我动态修改checkboxchecked字段时,界面上的状态能够实时变化,但是无法触发checkbox-groupchange事件。意味着无法依赖checkbox-group管理好已选项。

就是说:我点了全选,界面上看着是全选了。然后此时我取消了其中一个选项,此时触发change事件,但是它反馈给我的已选列表是错的。这是不行的。

所以我自己想了个实现全选多选框的方案。

实现思路

鉴于上面的问题,于是就可以放弃checkbox-group了,那么,我顺便就放弃了checkbox,因为我更喜欢radio的圆圈样式。

首先先模拟生成一些数据,方便展示,数据的要点是要有一个字段selected

  1. 전체 선택을 달성하기 위해 이벤트에 의존할 수 없음
  2. 스타일이 고정되어 수정이 어렵습니다
모든 선택을 달성할 수 없는 이유는 다음과 같습니다.

를 동적으로 수정합니다. 체크박스checked 필드를 체크하면 인터페이스의 상태가 실시간으로 변경될 수 있지만 change 이벤트가 발생합니다. >checkbox-group을 실행할 수 없습니다. 이는 checkbox-group을 사용하여 선택한 옵션을 관리할 수 없음을 의미합니다.

즉, 모두 선택을 클릭했는데 인터페이스에서 모두가 선택된 것처럼 보였습니다. 그런 다음 옵션 중 하나를 취소하고 변경 이벤트가 트리거되었지만 나에게 피드백된 선택된 목록이 잘못되었습니다. 이것은 작동하지 않습니다.

그래서 모두 선택 다중 선택 상자를 구현하는 솔루션을 생각해 냈습니다.

구현 아이디어

위의 문제를 고려하여 checkbox-group을 포기할 수 있는데, 그런데 checkbox를 포기했습니다. 왜냐하면 나는 원형 스타일의 라디오를 선호하기 때문입니다.

먼저, 쉽게 표시할 수 있도록 일부 데이터를 시뮬레이션하고 생성합니다. 데이터의 핵심은 필드를 선택하는 것이며 나머지는 원하는 대로 수행할 수 있습니다.

<script>
    import { reactive } from "vue";
    // 模拟的数据对象,要是响应式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成数据
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "标题" + i,
            selected: false,
        });
    }</script>
로그인 후 복사

그런 다음 지도를 사용하여 선택한 데이터 정보를 저장하는 개체가 있습니다.

    // 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定
    let selected = reactive(new Map<number>());</number>
로그인 후 복사

그런 다음 데이터를 선택하거나 선택 취소하기 위한 옵션 상자 클릭 이벤트가 있어야 합니다.

    // 选项框点击事件,参数是数据的下标
    function checkbox(index: number) {
        // 选中的状态下再次点击,即为取消选中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后删除对应key即可
        }
        // 未选中状态下点击
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }
로그인 후 복사

그리고 모두 선택을 위한 클릭 이벤트가 있어야 합니다.

    // 全选与反选事件
    function allSelect() {
        // 已经全选情况下,就是反选,全选就说明长度一样
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不选,就行了
            });
        }
        // 还未全选的状态下
        else {
            data.forEach((element, index) => {
                // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的
                    element.selected = true; // 设为选中
                }
            });
        }
    }
로그인 후 복사

사실 위 두 번의 클릭 이벤트는 모두 아주 기본적인 판단과 데이터 추가 및 삭제입니다. 이제 모든 기능을 사용할 수 있습니다. 페이지에 어떻게 쓰여 있는지 살펴보겠습니다. uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예
<template>
    <!-- 是个多选列表 -->
    <view>
        <label>
            <radio></radio>{{ item.text }}        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio></radio>全选</label></template>
로그인 후 복사
사실 두 세트의 라디오가 있는데, 하나는 데이터를 반복적으로 표시하는 것이고 다른 하나는 모두 선택 버튼입니다.


함께 연결된 완전한 코드: uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예

<template>
    <!-- 是个多选列表 -->
    <view>
        <label>
            <radio></radio>{{ item.text }}
        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio></radio>全选</label></template><script>
    import { reactive } from "vue";

    // 模拟的数据对象,要是响应式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成数据
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "标题" + i,
            selected: false,
        });
    }

    // 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定
    let selected = reactive(new Map<number, number>());

    // 全选与反选事件
    function allSelect() {
        // 已经全选情况下,就是反选,全选就说明长度一样
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不选,就行了
            });
        }
        // 还未全选的状态下
        else {
            data.forEach((element, index) => {
                // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的
                    element.selected = true; // 设为选中
                }
            });
        }
    }

    // 选项框点击事件,参数是数据的下标
    function checkbox(index: number) {
        // 选中的状态下再次点击,即为取消选中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后删除对应key即可
        }
        // 未选中状态下点击
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }</script><style></style>
로그인 후 복사
많은 코드처럼 보이지만 사실은 모두 매우 기본적인 논리적 판단입니다.


최종 효과는 다음과 같습니다. uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예 모두 선택:

다중 선택:

🎜🎜🎜역전 모두 선택: 🎜🎜🎜🎜권장: "🎜uniapp tutorial🎜"🎜

위 내용은 uniapp이 다중 선택 상자의 전체 선택 기능을 구현하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿