vue.js - Element2x 中 textarea 如何设置 autosize 同时保留 rows 属性？

Question

一个使用row调整 , 一个使用js动态改变height高度 , 但height高度优先级高于row的设置 , 所以row失效了 , 我想手动控制是否谁失效 , 并修改为默认height
失效 , 大概是这个意思

Answer 1

感觉OP的需求是，想自己封装一个输入框组件，在设置 Rows 属性时，应用 Rows 的行高，在没有设置 Rows 时，让 Input.textArea 框自动适应内容高度。

<template>
  <div id="test">
    <div>输入框：</div>
    <el-input
      v-model="testMessage"
      placeholder="请输入内容"
      type="textarea"
      :autosize="areaRows ? false : { minRows: 2, maxRows: 4}"
      :rows="areaRows"
      :key="`text-area-${areaRows}`"
    ></el-input>

    <div style="margin-top:30px">设置文本框行数：</div>
    <el-input
        v-model="areaRows"
        placeholder="不输入值时，TextArea为AutoSize，输入值时TextArea固定行数"
    ></el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      areaRows: null,
      testMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }
  }
}
</script>
<style>
#test {
 max-width: 500px;
}
</style>