用vue3实现在下拉框的值前面添加多选框，实现全选和取消全选

最新推荐文章于 2024-05-09 11:32:07 发布

wl_sqfn

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/wl_sqfn/article/details/133794974

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue样式

              <el-select
                v-model="checkedValues"
                multiple
                placeholder="Please select"
                style="width: 640px"
                @focus="editUserRole()">
                <el-checkbox v-model="isAllSelected" style="padding-left: 18px" @change="selectAll"
                  >Select All</el-checkbox
                >
                <el-option
                  v-for="(item, index) in roleOptions"
                  :key="index"
                  :label="item.roleName"
                  :value="item.id">
                </el-option>
              </el-select>

调用的方法

 <script setup>
// 是否全选
  const isAllSelected = ref(false);
  // 下拉框中选中的值
  const checkedValues = ref([]);

  /** 下拉框中获取值的方法 */
  function editUserRole() {
    roleOptions.value = [];
    const params = {
      userIds: ids.value
    };
//下面是调用后端接口的方法
    getRoleListByBU(params).then((res) => {
      roleOptions.value = res.data;
    });
  }
 function selectAll() {
    isAllSelected.value = false;

    if (checkedValues.value.length === roleOptions.value.length) {
      checkedValues.value = []; // 全选状态下，取消全部选择
      isAllSelected.value = false;
    } else {
      checkedValues.value = roleOptions.value.map((item) => item.id); // 全选
      isAllSelected.value = true;
    }
  }
</script>