10_ElementUI 复合型输入框input

在Vue.js中使用Element UI库时，复合型输入框通常是指结合了下拉选择器的输入框。以下是一个简单的例子，展示了如何创建一个复合型输入框，它结合了el-input和el-select组件。

<template>
  <el-row>
    <el-col :span="12">
      <el-input v-model="input" placeholder="请选择或输入">
        <template slot="append">
          <el-select v-model="selected" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-input>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      input: '',
      selected: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ]
    };
  }
};
</script>

在这个例子中，我们使用了el-input组件的slot="append"来添加一个下拉选择器作为输入框的附加内容。用户可以在输入框里直接输入文本，也可以通过下拉选择器选择一个选项。通过v-model绑定，这两种方式的数据都将同步到相应的数据属性中。