el-input框输入的问题?

Question

el-input框输入的问题
el-input是通过封装的，在data里面是这样使用的，代码如下
userName: {

type: 'input',
label: '用户名',
required: true,

},
现在的赋值
const res = await getCompanyInfo()

 this.formData.userName = res.data.companyCode
if (this.formData.userName.length <= 5) {
  this.formData.userName = res.data.companyCode.slice(0, 5);
}

res.data.companyCode是接口api返回来的数据固定的字段，显示在页面上
现在的需求是 返回来的字段是固定的不能让客户删除，只能在固定的字段后面添加跟删除，现在想要在input里面监听@input="handleInput" 可是在data里怎么写上@input="handleInput"，如果不在data里面写@input="handleInput"这个 ，大佬们，在this.formData.userName = res.data.companyCode又该怎么实现前面的字段是固定的，后面的字符可增可减呢

if (this.formData.userName.length <= 5) {

  this.formData.userName = res.data.companyCode.slice(0, 5);
}

尝试着这样写 没效果， input框里光标 还会把固定的字段清空

Answer 1

既然返回的字段是固定的，直接用prepend带在input前面不就行了吗？

Answer 2

修改封装的组件 使其支持自定义input事件

Answer 3

是这种效果吗？

<template>
  <el-input v-model="reSetVal" v-append-text="preVal" @change="$emit('change', $event)"></el-input>
</template>
<script>
export default {
  name: "testComponent",
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ["value"],
  directives: {
    appendText: {
      update(el, binding, vnode) {
        el.addEventListener('input', function(event) {
          if(event.target.value.length < binding.value.length){
            vnode.componentInstance.$emit('input', binding.value);
          }
        });
      }
    }
  },
  watch:{
    value(newVal, oldVal){
      this.reSetVal = newVal;
      this.preVal = newVal.slice(0, 5);
    }
  },
  data(){
    return {
      preVal: "",
      reSetVal: ""
    }
  }
}
</script>

Answer 4

<template>
  <el-form>
    <!-- 封装的el-input组件 -->
    <your-custom-el-input
      v-model="formData.fixedUserName"
      :label="userName.label"
      :required="userName.required"
      @input="handleInput"
    ></your-custom-el-input>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        fixedUserName: '', // 初始化为空字符串
        // ... 其他字段
      },
      userName: {
        type: 'input',
        label: '用户名',
        required: true,
      },
    };
  },
  async created() {
    const res = await getCompanyInfo();
    this.formData.fixedUserName = res.data.companyCode.slice(0, 5); // 设置固定的公司编号
  },
  methods: {
    handleInput(value) {
      // 在这里处理输入事件，保留固定的公司编号并允许用户在后面追加或删除字符
      let fixedPart = res.data.companyCode.slice(0, 5);
      let editablePart = value.slice(fixedPart.length);

      // 更新formData的fixedUserName字段
      this.formData.fixedUserName = fixedPart + editablePart;
    },
  },
};
</script>

在上面的代码中，做了以下改动：
在data对象中添加了一个新的字段fixedUserName来保存用户不可编辑的固定部分和可编辑的动态部分组合的完整用户名。
在created钩子中设置了fixedUserName的初始值。
在Vue组件模板中给el-input添加了@input事件监听器，并绑定了handleInput方法。
在handleInput方法中，截取了用户输入值中超过固定公司编号长度的部分作为可编辑部分，然后将其与固定公司编号拼接起来。
请注意，上述代码中的your-custom-el-input应替换为实际封装的el-input组件名称。
最后，再视实际情况微调handleInput方法的实现细节，确保在保留固定部分的同时能够正确处理用户输入。