vue把elementUi的输入框当做文件选择框使用，使用技巧

在Vue中，可以通过使用Element UI的el-input组件并结合el-upload组件的功能来实现文件选择框的效果。以下是一个简单的示例：

<template>
  <el-upload
    class="file-uploader"
    ref="upload"
    action="#"
    :auto-upload="false"
    :on-change="handleChange"
  >
    <el-input
      slot="trigger"
      placeholder="选择文件"
      readonly
    >
      <el-button
        slot="append"
        icon="el-icon-upload"
        @click="handleClick"
      >
        上传
      </el-button>
    </el-input>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 文件改变时的处理逻辑
      console.log(file.raw); // 这里可以获取到选中的文件
    },
    handleClick() {
      this.$refs.upload.$refs.input.click(); // 触发文件上传的点击事件
    },
  },
};
</script>
 
<style>
.file-uploader .el-upload__input {
  display: none;
}
</style>

在这个例子中，el-input组件用于创建一个输入框，并且通过readonly属性禁止输入。el-upload组件用于处理文件上传的逻辑，但是设置了auto-upload属性为false以禁用自动上传。通过handleClick方法，我们模拟了输入框内的按钮点击，从而打开文件选择对话框。当用户选择文件后，handleChange方法被触发，并可以获取到选中的文件。