动态添加下拉选择框vue+elementui，限定添加个数

你可以使用Vue的动态组件和Element UI的Select组件来实现动态添加下拉选择框，并通过Vue的计算属性来限制添加的个数。

首先，你需要定义一个组件用来包装Select组件，并通过props来传递Select组件的属性。例如：

<template>
  <div>
    <el-select v-model="value" :placeholder="placeholder" :options="options"></el-select>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  }
}
</script>

然后，在父组件中定义一个数组来存储动态添加的下拉选择框。通过v-for指令来渲染这些组件，并通过v-if指令来判断是否已经添加了足够的组件。例如：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <dynamic-select v-model="item.value" :placeholder="item.placeholder" :options="item.options"></dynamic-select>
    </div>
    <el-button v-if="items.length < maxItems" @click="addItem">添加</el-button>
  </div>
</template>

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

export default {
  components: {
    DynamicSelect
  },
  data () {
    return {
      items: [],
      maxItems: 5 // 最多添加5个下拉选择框
    }
  },
  methods: {
    addItem () {
      this.items.push({
        value: '',
        placeholder: '请选择',
        options: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ]
      })
    }
  },
  computed: {
    canAddItem () {
      return this.items.length < this.maxItems
    }
  }
}
</script>

在上面的代码中，当items数组的长度小于maxItems时，显示一个“添加”按钮，点击按钮时通过addItem方法向items数组中添加一个新的对象，这个对象包含了要传递给DynamicSelect组件的属性。同时，通过计算属性canAddItem来判断是否还能够添加下拉选择框。