将textarea实现自适应高度及IE下滚动条不出现的bug

Posted 2020-11-01 行走的JS

1.<el-table-column label="备注" width="180">

  <template scope="scope">
    <el-input
      class="remark"
      :readonly="Todisabled"
      type="textarea"
      :rows="calcRows(scope.row.remarks)"
      v-model="scope.row.remarks"
      placeholder="请输入内容">
    </el-input>
  </template>
</el-table-column>
2.element-ui的<el-textarea>文本框是不能自适应高度的，且如果将其设为只读disabled在IE9+下是不出现滚动条的，
这样会给使用人员造成误解，下面就如何将textarea设为自适应高度做以下解读：

3.解决IE9+下不出现滚动条的问题：

将disabled改为readonly，textarea的disabled在IE下是显示不出滚动条的，因此要想实现此功能，将disabled改为readonly，然后再去改变readonly下的样式；

textarea[readonly]{//所有disabled改为readonly
  background-color: #eef1f6;
  cursor: not-allowed;
}

4.解决高度不能自适应的问题：

如果不想定高，超出部分隐藏，而是要有多少内容显示多少，可以借助element-ui的<el-textarea>的rows属性，输入框行数，只对 type="textarea" 有效，为number，

这里想要实现自动变换高度，就应该将rows绑定为一个变量，这里:rows="calcRows(scope.row.remarks)"，calcRows为vue，computed（）{}里的一个计算属性，

calcRows(text) {
  if (!text) return 2
  const arr = text.match(/\n/g)
  return arr ? arr.length + 2 : 2
},
将calcRows绑定在rows上，即可实现文本域高度自适应。