elementui 多个input合成一个input

ElementUI中没有现成的多个input合成一个input的组件，但可以通过自定义组件来实现。

具体步骤如下：

1. 创建一个自定义组件，使用template模板，将多个input组合到一起。

2. 在组件中使用v-model绑定一个值，用于保存合成后的输入内容。

3. 在组件中绑定每个input的change事件，将输入内容拼接到v-model绑定的值上。

4. 在父组件中使用自定义组件，并绑定一个数据，作为v-model的绑定值。

示例代码如下：

<template>
  <div class="multi-input">
    <input v-model="inputValue1" @change="handleChange" />
    <input v-model="inputValue2" @change="handleChange" />
    <input v-model="inputValue3" @change="handleChange" />
  </div>
</template>

<script>
export default {
  name: "MultiInput",
  data() {
    return {
      inputValue1: "",
      inputValue2: "",
      inputValue3: "",
    };
  },
  props: ["value"], // 绑定父组件的数据
  methods: {
    handleChange() {
      // 将三个input的值拼接到一起，保存到v-model绑定的值上
      this.$emit("input", `${this.inputValue1}-${this.inputValue2}-${this.inputValue3}`);
    },
  },
  created() {
    // 初始化v-model绑定的值
    this.$emit("input", `${this.inputValue1}-${this.inputValue2}-${this.inputValue3}`);
  },
};
</script>

在父组件中使用自定义组件，并绑定一个数据，作为v-model的绑定值：

<template>
  <div class="parent">
    <multi-input v-model="value"></multi-input>
  </div>
</template>

<script>
import MultiInput from "@/components/MultiInput.vue";

export default {
  name: "ParentComponent",
  components: {
    MultiInput,
  },
  data() {
    return {
      value: "", // 绑定自定义组件的v-model
    };
  },
};
</script>