Vue3實現(xiàn)下拉選擇框多選功能的方法詳解

更新時間：2023年09月10日 14:05:15 作者：SeaCassie

在vue的實際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下

起因：

項目采用vue3+elmentui-plus +ts 搭建成的。用戶界面設(shè)計上需要一個帶全選的下拉選擇框。而element plus 官網(wǎng) 提供的下拉多選框是

這種形式是沒有全選按鈕的，并且樣式也不符合想像中的全選的操作。故開始想法子去結(jié)合一個新的條件去封裝一個新的組件。

效果展示：

設(shè)計原理：

由于用戶更加熱衷于帶有全選的下拉框，并且不喜歡右側(cè)的√的選擇標(biāo)識，而需要換成和多選框一直的選中框，于是，根據(jù)已有的條件，我采用 el-select + el-checkbox的形式去編寫這個組件。

組件代碼構(gòu)成創(chuàng)建子組件selectCheckBox.vue文件

html 部分

<el-select
    v-model="menusTitle"
    multiple
    collapse-tags
    collapse-tags-tooltip
    :placeholder="props.placeholder"
    clearable
    @clear="clearData"
  >
    <!-- @change="changeSelectMenu" -->
    <el-checkbox v-model="checkedAll" @change="selectAll">全選</el-checkbox>
    <el-option
      v-for="(item, index) in menuList"
      :key="item[props.id]"
      :value="item[props.id]"
    >
      <el-checkbox
        :label="item[props.label]"
        size="large"
        @change="changeCheckBox(item, index)"
        :checked="isChecked(item, index)"
        v-model="checkBoxObj[index]"
      />
    </el-option>
  </el-select>

js部分

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits } from "vue";
const props = defineProps({
  list: { type: Array, required: true },
  id: { type: String, required: true },
  label: { type: String, required: true },
  modelValue: { type: Array },
  placeholder: { type: String, default: "選擇" },
});
const emit = defineEmits(["update:modelValue"]);
const value = ref("");
const checkedAll = ref("false");
const menus = ref([]);
const menuList = props.list;
const checkBoxObj = ref({});
menuList.forEach((res, index) => {
  checkBoxObj.value[index] = false;
});
const menusTitle = ref([]);
const changeSelectMenu = (val) => {};
const selectAll = (value) => {
  menus.value = [];
  menusTitle.value = [];
  if (value) {
    menuList.forEach((item, index) => {
      menus.value.push(item[props.id]);
      menusTitle.value.push(item[props.label]);
      checkBoxObj.value[index] = true;
    });
  } else {
    menus.value = [];
    menusTitle.value = [];
    menuList.forEach((item, index) => {
      checkBoxObj.value[index] = false;
    });
  }
  emit("update:modelValue", menus.value);
};
const isChecked = (item) => {
  return menus.value.indexOf(item[props.id]) > -1;
};
const changeCheckBox = (item, index) => {
  let i = menus.value.indexOf(item[props.id]);
  if (i == -1) {
    menus.value.push(item[props.id]);
    menusTitle.value.push(item[props.label]);
  } else {
    menus.value.splice(i, 1);
    menusTitle.value.splice(i, 1);
  }
  if (menus.value.length == menuList.length) {
    checkedAll.value = true;
  } else {
    checkedAll.value = false;
  }
  emit("update:modelValue", menus.value);
};
const clearData = () => {
  menus.value = [];
  menusTitle.value = [];
  emit("update:modelValue", menus.value);
  checkedAll.value = false;
  menuList.forEach((item, index) => {
    checkBoxObj.value[index] = false;
  });
};
</script>

css部分：

<style lang="scss" scoped>
.el-select-dropdown {
  .el-checkbox {
    display: flex;
    align-items: center;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .el-select-dropdown__item {
    // background-color: red !important;
    padding: 0;
    display: flex;
    align-items: center;
  }
}
</style>

父組件調(diào)用

html 引入部分

 <selectCheckBox
          v-model="value3 "
          :list="options"
          id="value"
          label="label"
          placeholder="選擇項目"
        ></selectCheckBox>

js引入部分

import selectCheckBox from "@_components/dataClassification/selectCheckBox.vue";
const value3 = ref([]);
const options = [
  {
    value: "1",
    label: "項目一",
  },
  {
    value: "2",
    label: "項目二",
  },
  {
    value: "3",
    label: "項目三",
  },
];