vue+elment 条件判断 下拉框是否多选

在使用 element-ui 的下拉框时，可以通过设置 `multiple` 属性来控制下拉框是否可以多选。例如：

<el-select v-model="value" :multiple="isMultiple">
  <el-option label="Option 1" value="1"></el-option>
  <el-option label="Option 2" value="2"></el-option>
  <el-option label="Option 3" value="3"></el-option>
</el-select>

其中，`isMultiple` 是一个变量，根据它的值来决定下拉框是否可以多选。如果 `isMultiple` 的值为 `true`，则下拉框可以多选，否则只能单选。

需要注意的是，如果使用了 `v-model` 来绑定下拉框的值，那么 `value` 变量必须是一个数组，用来保存选中的多个值，例如：

data() {
  return {
    value: [],
    isMultiple: true
  }
}

如果 `isMultiple` 的值为 `false`，则 `value` 变量只保存单个选中的值。

相关问题

vue+element+springboot实现从数据库取出的值进行多选

首先，在后端Spring Boot中创建一个REST API，用于从数据库中获取选项列表。可以使用JPA或MyBatis等框架来查询数据库并返回结果。

在前端Vue中，使用Element UI的el-select和el-option组件来实现多选下拉框。在mounted生命周期钩子中，使用axios或者Vue-resource等库来调用后端的REST API，获取选项列表并渲染到el-option中。

最后，使用v-model指令和multiple属性将el-select设置为多选模式，并将选中的选项绑定到Vue实例的数据中，以便后续处理。以下是一个简单的示例代码：

后端Spring Boot代码示例：

@RestController
@RequestMapping("/api/options")
public class OptionController {
  
  @Autowired
  private OptionRepository optionRepository;
  
  @GetMapping
  public List<Option> getOptions() {
    return optionRepository.findAll();
  }
  
}

前端Vue代码示例：

<template>
  <el-select v-model="selectedOptions" multiple>
    <el-option v-for="option in options" :key="option.id" :label="option.label" :value="option.id"></el-option>
  </el-select>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      options: [],
      selectedOptions: []
    }
  },
  mounted() {
    axios.get('/api/options').then(response => {
      this.options = response.data;
    });
  }
}
</script>

vue自定义多选可搜索下拉框

要实现一个自定义多选可搜索下拉框，可以使用Vue框架结合element-ui组件库来实现。下面是一个简单的实现方式：

首先，安装element-ui组件库：

npm install element-ui

然后，在需要使用的组件中引入element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

接下来，创建一个多选可搜索下拉框组件，代码如下：

<template>
  <el-select
    v-model="selectedItems"
    multiple
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    :disabled="disabled"
    :placeholder="placeholder"
    clearable
    @change="handleChange">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      options: [],
      loading: false,
      disabled: false,
      placeholder: '请选择',
      remoteUrl: '',
      remoteParams: {},
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        // 发送请求获取数据
        axios.get(this.remoteUrl, { params: { query, ...this.remoteParams } }).then(res => {
          this.options = res.data
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.options = []
      }
    },
    handleChange(val) {
      this.$emit('change', val)
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedItems = newVal
      },
      immediate: true
    }
  }
}
</script>

这个组件使用了element-ui中的`el-select`和`el-option`组件，通过设置`multiple`属性来实现多选。设置`filterable`属性来让下拉框可搜索，通过设置`remote`属性来实现远程搜索。

在组件中，通过`remoteMethod`方法来发送请求获取需要显示的选项，将获取到的选项保存在`options`数据中，同时设置`loading`状态来显示加载中状态。`handleChange`方法用于监听选项的变化，通过`$emit`方法触发`change`事件来向父组件传递选中的值。组件中还定义了一些props和data，用于接收外部传入的数据。

最后，在使用该组件的父组件中，可以通过以下方式来使用：

<template>
  <div>
    <custom-select v-model="selectedItems" :remote-url="remoteUrl"></custom-select>
  </div>
</template>

<script>
import CustomSelect from './CustomSelect.vue'

export default {
  components: {
    CustomSelect
  },
  data() {
    return {
      selectedItems: [],
      remoteUrl: 'http://example.com/api/search'
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

在父组件中，可以通过v-model指令来绑定选中的值，通过设置`remote-url`属性来指定远程搜索的API地址。同时，可以监听`change`事件来获取选中的值。