vue 的el-input框中添加%符号呢

你可以在 Vue 的 `el-input` 组件中使用 `slot` 来自定义输入框的结构。以下是一个示例：

<el-input v-model="value" placeholder="Enter">
  <template slot="append">%</template</el-input>

在这个示例中，我们使用 `v-model` 来绑定输入框的值到 Vue 实例的 `value` 属性上。然后，我们使用 `slot` 来在输入框的尾部插入一个 `%` 符号。这个 `%` 符号将会自动跟随输入框的宽度变化而变化。

如果你想要在 `%` 符号和输入框之间添加一些间距，可以使用 `slot-scope` 来访问输入框的原始 HTML 结构，然后自定义 CSS 样式。以下是一个示例：

<el-input v-model="value" placeholder="Enter value">
  <template slot="append" slot-scope="{ disabled }">
    <span class="input-symbol" :class="{ 'is-disabled': disabled }">%<span>
  </template>
</el-input>

.input-symbol {
  margin-left: 10px;
  margin-right: 10px;
}

.is-disabled {
  opacity: 0.5;
}

在这个示例中，我们使用 `slot-scope` 来访问 `el-input` 组件的 `disabled` 属性。然后，我们使用自定义的 CSS 样式来添加间距和禁用状态的样式。