Examples to explain how uniapp implements the all-select function of multi-select boxes

This article brings you relevant knowledge about uniapp, which mainly organizes the related issues of implementing the select-all function of the multi-select box. The reason why the select-all cannot be achieved is that the checkbox is dynamically modified. When the field is checked, the status on the interface can change in real time, but the change event of the checkbox-group cannot be triggered. Let's take a look at it. I hope it will be helpful to everyone.

Recommendation: "uniapp tutorial"

uniapp's built-in checkbox is actually as well as checkbox- group was originally very good, but there are two problems:

1. Cannot rely on its events to achieve selection all
2. The style is fixed and difficult to modify

The reason why they cannot select all is:
When I dynamically modify the checked field of checkbox, the status on the interface can change in real time, but the checkbox cannot be triggered- change event of group. This means that you cannot rely on checkbox-group to manage the selected options.

That is to say: I clicked Select All, and it looked like All was selected on the interface. Then I canceled one of the options and the change event was triggered, but the selected list it fed back to me was wrong. This won't work.

So I came up with a solution to implement the select-all multi-select box.

Implementation ideas

In view of the above problems, we can give up checkbox-group. Then, I gave up checkbox by the way, because I prefer the circle style of radio.

First simulate and generate some data for easy display. The key point of the data is to have a field selected, and the rest is as you like:

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

Then we need to have a storage selected The object of data information uses map:

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

Then we have to have an option box click event for selecting data or deselecting:

    // 选项框点击事件，参数是数据的下标
    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);
        }
    }

And then, we have to have a Click event for selecting all:

    // 全选与反选事件
    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; // 设为选中
                }
            });
        }
    }

In fact, the above two click events are very basic judgments and additions and deletions of data. Now all the functions are available, let’s see how the page is written:

<template>
    <!-- 是个多选列表 -->
    <view>
        <label>
            <radio></radio>{{ item.text }}        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio></radio>全选</label></template>

In fact, there are two sets of radios, one is to display data in a loop, and the other is a select all button.

The complete code connected together:

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

It seems like a lot of code, but in fact it is all very basic logical judgments.

The final effect is like this:
Select all:

Multiple selection:

Inverse select all:

Recommended: "uniapp tutorial"

The above is the detailed content of Examples to explain how uniapp implements the all-select function of multi-select boxes. For more information, please follow other related articles on the PHP Chinese website!