两个el-input-number实现金额范围

您可以使用两个 `el-input-number` 组件来实现金额的范围输入，具体实现如下：

<template>
  <div>
    <el-input-number v-model="minAmount" :min="0" :max="maxAmount" :step="0.01" controls-position="right" size="small" @change="onMinChange">
      <template slot="prepend">$</template>
    </el-input-number>
    <span>~</span>
    <el-input-number v-model="maxAmount" :min="minAmount" :step="0.01" controls-position="right" size="small" @change="onMaxChange">
      <template slot="prepend">$</template>
    </el-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minAmount: 0,
      maxAmount: 100
    }
  },
  methods: {
    onMinChange(val) {
      this.minAmount = parseFloat(val.toFixed(2))
    },
    onMaxChange(val) {
      this.maxAmount = parseFloat(val.toFixed(2))
    }
  }
}
</script>

在上述代码中，我们使用了两个 `el-input-number` 组件来实现金额的范围输入。第一个组件用于输入最小金额，第二个组件用于输入最大金额。我们在组件中使用了 `v-model` 来绑定最小和最大金额的值，并且使用了 `:min` 和 `:max` 属性来限制输入金额的范围。我们还使用了 `controls-position` 属性来设置两个组件的操作按钮的位置。在输入金额后，我们使用 `@change` 事件来更新最小和最大金额的值。最后，我们在每个组件的插槽中使用 `$` 符号来表示输入金额的货币单位。