Element-UI+vue多选全选

最新推荐文章于 2025-05-20 15:01:36 发布

原创最新推荐文章于 2025-05-20 15:01:36 发布 · 782 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

element-ui 专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中实现选择功能，特别是全选和多选的交互逻辑。通过`choiceHandler`函数，实现了在用户选择或取消选择“全部”选项时，自动更新选中状态并处理其他选项。示例代码展示了如何在`channelChange`事件中更新用户参数，并使用`el-select`组件来展示和管理选择项。该博客对于理解Vue.js组件的数据绑定和事件处理具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击全选，选中全部选项

全部选项选中后，自动跳转到全选

export function choiceHandler(val, that, all, active, len) {
    // console.log(all);
    if (val == '') {
        that[active] = ["全部"];
        that[all] = true;
        from = "";
        return
    }
    let from = ''
    if (that[all]) {
        that[all] = false;
        if (val.indexOf("全部") > -1) {
            that[active] = val.filter((item) => item != "全部");
            from = that[active][0];
        }
    } else {
        if (val.indexOf("全部") > -1) {
            // 点击了全部
            that[active] = ["全部"];
            that[all] = true;
            from = "";
        } else {
            // 点完所有选项后
            if (val.length == len) {
                that[active] = ["全部"];
                that[all] = true;
                from = "";
            } else {
                // 没有点击全部
                from = val.join(",");
            }
        }
    }
    return from
}

<template>
<el-select
   v-model="channelIdActive"
   multiple
   collapse-tags
   style="margin-right: 10px"
   placeholder="请选择"
   @change="channelChange"
   clearable
>
   <el-option key="全部" label="全部" value="全部" />
   <el-option
      v-for="item in channelListsData"
      :key="item.id"
      :label="item.ChannelName"
      :value="item.id"
   />
</el-select>
</template>



<script>
data(){
    return {
      // 渠道的选中内容
      userParams: {
          ChannelId: ''
      },
      // 渠道列表选中
      channelIdActive: ["全部"],
      // 渠道列表
      channelListsData: [],
      // 渠道内容全选状态
      allChannel: true,
    }
},
methods: {
    // 渠道选中值发生变化时
    channelChange(val) {
      let that = this;
      this.userParams.ChannelId = choiceHandler(
        val,
        that,
        "allChannel",
        "channelIdActive",
        this.channelListsData.length
      );
    },
}
</script>