Vue.js 中实现下拉选择器与文本输入框的动态切换教程

// Vue 组件的 data 选项
data() {
  return {
    form: {
      task_name: '', // 用于绑定任务名称，可以是预设选项，也可以是自定义文本
    },
    // 下拉选择器的选项列表
    taskNameChoices: [
      { id: 'task1', text: '任务A' },
      { id: 'task2', text: '任务B' },
      { id: 'Other', text: '其他' } // 关键：定义一个“其他”选项，其id或text与v-if条件匹配
    ]
  };
},
// 假设 taskNameChoices 可以从后端获取
// mounted() {
//   this.taskNameChoices = instanceData.case && instanceData.case.task_names || [];
//   // 如果需要根据后端数据初始化 form.task_name
//   if (instanceData.case && instanceData.case.selected_task) {
//     this.form.task_name = instanceData.case.selected_task;
//   }
// }

<div class="col-md-4">
  <div class="form-group label-static" :class="{'has-error': errors.task_name && errors.task_name.length > 0}">
    <label class="typo__label control-label">任务名称 <span class="req">*</span></label>

    <!-- 当 form.task_name 不为 'Other' 时显示下拉选择器 -->
    <multiselect
      v-if="form.task_name !== 'Other'"
      v-model="form.task_name"
      :options="taskNameChoices"
      :multiple="false"
      :close-on-select="true"
      :clear-on-select="true"
      :preserve-search="true"
      placeholder="选择任务"
      label="text"
      track-by="id"
      :hide-selected="false"
      :show-labels="false"
    >
    </multiselect>

    <!-- 当 form.task_name 为 'Other' 时显示文本输入框 -->
    <input
      v-else
      type="text"
      v-model="form.task_name"
      class="form-control"
      placeholder="请输入自定义任务名称"
    >

    <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]" v-cloak></span>
  </div>
</div>

<template>
  <div id="app">
    <div class="col-md-4">
      <div class="form-group label-static" :class="{'has-error': errors.task_name && errors.task_name.length > 0}">
        <label class="typo__label control-label">任务名称 <span class="req">*</span></label>

        <!-- 当 form.task_name 不为 'Other' 时显示下拉选择器 -->
        <multiselect
          v-if="form.task_name !== 'Other'"
          v-model="form.task_name"
          :options="taskNameChoices"
          :multiple="false"
          :close-on-select="true"
          :clear-on-select="true"
          :preserve-search="true"
          placeholder="选择任务"
          label="text"
          track-by="id"
          :hide-selected="false"
          :show-labels="false"
          @select="handleTaskSelect" <!-- 添加一个处理函数来确保逻辑一致性 -->
        >
        </multiselect>

        <!-- 当 form.task_name 为 'Other' 时显示文本输入框 -->
        <input
          v-else
          type="text"
          v-model="form.task_name"
          class="form-control"
          placeholder="请输入自定义任务名称"
        >

        <!-- 错误信息显示（根据实际项目调整） -->
        <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]"></span>
      </div>
    </div>
    <p>当前任务名称: {{ form.task_name }}</p>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'; // 导入 multiselect 组件

export default {
  components: { Multiselect },
  data() {
    return {
      form: {
        task_name: 'task1', // 初始值可以是一个预设选项的id，或'Other'
      },
      taskNameChoices: [
        { id: 'task1', text: '任务A' },
        { id: 'task2', text: '任务B' },
        { id: 'Other', text: '其他' }
      ],
      errors: {} // 用于模拟错误信息
    };
  },
  methods: {
    handleTaskSelect(selectedOption) {
      // 当选择“其他”时，确保 form.task_name 变为 'Other' 字符串
      // 否则，绑定的是选项的 id
      this.form.task_name = selectedOption.id;
    }
  },
  // 假设从后端获取数据并初始化
  created() {
    // 示例：模拟从后端获取初始数据
    // const instanceData = {
    //   case: {
    //     task_names: [
    //       { id: 'task1', text: '任务A' },
    //       { id: 'task2', text: '任务B' },
    //       { id: 'Other', text: '其他' }
    //     ],
    //     selected_task: 'task1' // 初始选中的任务
    //   }
    // };
    // if (instanceData.case && instanceData.case.task_names) {
    //   this.taskNameChoices = instanceData.case.task_names;
    // }
    // if (instanceData.case && instanceData.case.selected_task) {
    //   this.form.task_name = instanceData.case.selected_task;
    // }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
/* 示例样式，根据项目需求调整 */
#app {
  padding: 20px;
}
.form-group {
  margin-bottom: 20px;
}
.form-control {
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  width: 100%;
}
.help-block {
  color: red;
  font-size: 0.9em;
}
</style>