vue+element+在输入框末端加单位下拉

在Vue.js中结合Element UI库，实现输入框（通常指`el-input`组件）后面带有一个单位选择下拉（如`el-select`），你可以按照以下步骤操作：

1. 首先，在你的项目中确保已安装了Element UI，如果没有，可以使用npm或yarn安装：

   npm install element-ui --save
   # 或者
   yarn add element-ui

2. 引入需要的组件：

   import { ElInput, ElSelect } from 'element-ui';

3. 创建一个自定义的输入框组件，例如`UnitInput.vue`:

   <template>
     <div>
       <el-input v-model="inputValue" placeholder="请输入数值"></el-input>
       <el-select v-model="unit" @change="handleUnitChange">
         <el-option
           v-for="unitItem in units"
           :key="unitItem.value"
           :label="unitItem.label"
           :value="unitItem.value"
         ></el-option>
       </el-select>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         inputValue: '',
         unit: '', // 单位默认值
         units: [
           { value: 'kg', label: '千克' },
           { value: 'g', label: '克' },
           // 添加更多单位选项...
         ],
       };
     },
     methods: {
       handleUnitChange(unit) {
         this.inputValue = parseFloat(this.inputValue); // 如果输入的是数字，转换并保留单位
       },
     },
   };
   </script>

4. 在主应用组件或其他需要的地方，使用这个`UnitInput`组件。

在上面的例子中，我们创建了一个包含输入框和单位下拉的选择器。当用户从下拉框选择新单位时，`handleUnitChange`方法会处理输入值（假设之前是数字）并自动添加选定的单位。