Vue 2.0关于多选下拉框数据渲染的问题

王小婷

发布于 2023-10-01 08:36:00

2710

发布于 2023-10-01 08:36:00

文章被收录于专栏：编程微刊

json数据格式

"workFences":[{"staffId":0,"fenceId":"978f07559b2c434b90c58486c4238645","fenceName":"\u5B89\u68C0\u5BA4"},{"staffId":0,"fenceId":"8b360d6486fb41928f246db27dd8f107","fenceName":"\u623F\u95F4701"}]

要将数据渲染到代码中，可以按照以下步骤进行修改：

1：在组件的data中添加一个名为workFences的数组属性，并将其初始值设为你提供的数据：

data() {
  return {
    // ...
    workFences: [
      { staffId: 0, fenceId: "978f07559b2c434b90c58486c4238645", fenceName: "安检室" },
      { staffId: 0, fenceId: "8b360d6486fb41928f246db27dd8f107", fenceName: "房间701" }
    ],
  };
},

2：在模板中的options-list中，使用v-for指令遍历workFences数组，并将每个选项的fenceName作为显示的文本，例如：

<ul v-if="showDropdown" class="options-list">
  <li v-for="fence in workFences" :key="fence.fenceId" @click="toggleOption(fence.fenceId)">
    <input type="checkbox" :value="fence.fenceId" :checked="isSelected(fence.fenceId)">
    <label>{{ fence.fenceName }}</label>
  </li>
</ul>

3：在submitSelection方法中，将选中的选项的fenceName添加到selectedOptions数组中，例如：

submitSelection() {
  this.selectedOptions = this.workFences
    .filter(fence => this.selectedOptions.includes(fence.fenceId))
    .map(fence => fence.fenceName);
  // 重置选项并隐藏确认按钮
  this.selectedOptions = [];
  this.showConfirmButton = false;
},

这样，数据就会被渲染到下拉框的选项中，并且在用户点击确认按钮后，选中的选项的名称会被添加到selectedOptions数组中。

demo

<template>
  <div class="dropdown">
    <div class="selected-option" @click="toggleDropdown">
      <div class="selected-values">
        <span
          v-for="(option, index) in selectedOptions"
          :key="index"
          class="selected-value"
        >
          {{ option }}
          <span class="delete" @click="removeOption(option)"> &times; </span>
        </span>
      </div>
      <input
        type="text"
        v-model="searchText"
        placeholder="请选择选项"
        @input="filterOptions"
      />
      <span class="arrow"></span>
    </div>

    <button class="confirm-button" @click="submitSelection">确认</button>
    <!-- <ul v-if="showDropdown" class="options-list">
      <li
        v-for="option in filteredOptions"
        :key="option"
        @click="toggleOption(option)"
      >
        <input type="checkbox" :value="option" :checked="isSelected(option)" />
        <label>{{ option }}</label>
      </li>
    </ul> -->

    <ul v-if="showDropdown" class="options-list">
  <li v-for="fence in workFences" :key="fence.fenceId" @click="toggleOption(fence.fenceName)">
    <input type="checkbox" :value="fence.fenceId" :checked="isSelected(fence.fenceId)">
    <label>{{ fence.fenceName }}</label>
  </li>
</ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ["选项1", "选项2", "选项3", "选项4"], // 下拉框的选项数据
      selectedOptions: [], // 当前选中的选项
      showDropdown: false, // 控制悬浮框的显示状态
      searchText: "", // 过滤选项的搜索文本
      // ...
      showConfirmButton: false,
       // ...
    workFences: [
      { staffId: 0, fenceId: "978f07559b2c434b90c58486c4238645", fenceName: "安检室" },
      { staffId: 0, fenceId: "8b360d6486fb41928f246db27dd8f107", fenceName: "房间701" }
    ],

    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter((option) =>
        option.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;

      this.showConfirmButton = false;
    },
    toggleOption(option) {
      debugger
      this.showConfirmButton = true;
      if (this.isSelected(option)) {
        this.removeOption(option);
      } else {
        this.selectedOptions.push(option);
      }
    },
    removeOption(option) {
      const index = this.selectedOptions.indexOf(option);
      if (index !== -1) {
        this.selectedOptions.splice(index, 1);
      }
    },
    // submitSelection() {
    //   // 在这里处理提交选项的逻辑
    //   console.log("已选择的选项:", this.selectedOptions);
    //   // 重置选项并隐藏确认按钮
    //   this.selectedOptions = [];
    //   this.showConfirmButton = false;
    // },

    submitSelection() {
  this.selectedOptions = this.workFences
    .filter(fence => this.selectedOptions.includes(fence.fenceId))
    .map(fence => fence.fenceName);
  // 重置选项并隐藏确认按钮
  this.selectedOptions = [];
  this.showConfirmButton = false;
},

    isSelected(option) {
      return this.selectedOptions.includes(option);
    },
    filterOptions() {
      this.showDropdown = true;
    },
  },
};
</script>

<style>
.confirm-button {
  display: block;
  margin-top: 8px;
  padding: 8px 16px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: -31%;
  top: -21%;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.selected-option {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.selected-values {
  display: flex;
  flex-wrap: wrap;
}

.selected-value {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  padding: 4px 8px;
  border-radius: 16px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.selected-value .delete {
  margin-left: 4px;
  cursor: pointer;
}

.selected-option input {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  margin-left: 4px;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.options-list li {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.options-list li:hover {
  background-color: #f2f2f2;
}

.options-list li input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}
</style>