element的textarea内容排版乱了

Question

• 这张是页面初始化后请求后端渲染的内容

• 这张是我在resp_pkg前边删了一格又按了个空格的效果

怎么让页面初始化后就是第二张图的显示效果？
（请求返回的数据select后边是空格不是换行）

---

调用自动计算，只有先把窗口拉小计算再拉回去计算才可以

<el-button @click.native="test">计算</el-button>

methods:{
      test(){
        this.$nextTick(()=>{
          for(let i=0;i<this.$refs.textarea.length;i++){
            this.$refs.textarea[i].resizeTextarea();
          }
        })
      }
    }

Answer 1

这个input高度是通过calcTextareaHeight这个函数计算的，你这就是计算错误出现滚动条引起的，我之前也遇到过计算异常的问题，解决方式是赋值之后再主动触发resizeTextarea重算一遍

<el-input
  ref="textarea"
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea1">
</el-input>

mounted() {
  this.textarea1 = 'xxxxxxxxxxxxxxxxxxxx';
  this.$nextTick(() => {
    this.$refs.textarea.resizeTextarea();
  });
},

Answer 2

针对你说的我暂时没有好的解决办法，可以提供个别的解决方案，就是让英文以英文字母为折行标准

jsfiddle 的链接：

<el-input
    type="textarea"
    :rows="2"
    placeholder="请输入内容"
    v-model="textarea"
    class="textarea">
</el-input>

.textarea {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}