el-select的内容续写实现

<el-tooltip class="item" effect="dark" :disabled="textContent" :content="textContent" placement="top">
  <span @click.stop> <!--防止clear事件冒泡，导致visible-change重复触发问题-->
    <el-select :id="'inputReg'+scope.$index"
      v-model="textContent" placeholder="请输入内容"
      @visible-change="regBlur(...arguments, scope.$index, ('inputReg' + scope.$index), textContent)"
      default-first-option allow-create filterable clearable>
      <el-option v-for="(item, idx) in list" :key="idx"
        :label="item.content" :value="item.content"></el-option>
    </el-select>
  </span>
</el-tooltip>

regBlur(status, index, id, val) {
  const inputDom = document.querySelector('#' + id)
  let content = val || inputDom.value;
  if(val === inputDom.value) this.backupsText = val
  else if(this.backupsText === val) content = inputDom.value; // 接着增加采用
  else if(this.backupsText === inputDom.value) content = val; // 选择值采用
  if (!content) return;
  if (status){
    setTimeout(()=>{
      inputDom.value = content
      inputDom.scrollLeft = inputDom.scrollWidth - inputDom.clientWidth; // 让文字显示到最后
    }, 0)
    return;
  }
  let reg = /^[\u4E00-\u9FA5]*$/;
  let flag = reg.test(content);
  if (!flag) {
    this.$message.error('请输入汉字类型的内容')
    this.textContent = '';
  } else if (content.length > 16) {
    this.textContent = content.slice(0, 16);
    this.$message.warning('只能输入16个汉字！')
  } else {
    this.textContent = content;
  }
}
// this.backupsText 缓存修改前的值