最近做項(xiàng)目時(shí)，遇到一個(gè)問題。
關(guān)于element 多行輸入框高度問題，在編輯的時(shí)候，高度很正常，自適應(yīng)，寫幾行，高度就多高。但是編輯完成保存后，再次打開高度就多了很多，多了好幾行空白?？丛创a知道高度是計(jì)算得出的，需求又要求高度自適應(yīng)，樣式肯定是不行了，想別的辦法，然后得出了兩個(gè)方案。如下：
方法一：
在獲取到數(shù)據(jù)后，對數(shù)據(jù)進(jìn)行在處理，使得輸入框的高度重新計(jì)算。
setTimeout(() => {
? this.lists.forEach(list => {
? ? if (list.hasOwnProperty('children')) {
? ? ? var o_name = list.name;
? ? ? ? list.name = o_name + ' ';
? ? ? ? ? list.children.forEach(kr => {
? ? ? ? ? ? if (kr.hasOwnProperty('children')) {
? ? ? ? ? ? ? var kr_name = kr.name;
? ? ? ? ? ? ? ? ? kr.name = kr_name + ' ';
? ? ? ? ? ? ? ? ? kr.children.forEach(e => {
? ? ? ? ? ? ? ? ? ? var e_name = e.name;
? ? ? ? ? ? ? ? ? ? ? ? e.name = e_name + ' ';
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? })
? ? ? }
? ? })
? }, 100);
方法二：
改變輸入框的類型，默認(rèn)是單行輸入框，再次編輯的時(shí)候改變輸入框類型為多行輸入框，也是為了重新計(jì)算高度
<el-input
? :type="input_type"
? :placeholder="'請輸入(最多不超過500字)'"
? v-model="scope.row.name"
? class="ipt-hover edit_name"
? :ref="!scope.row.id?'kr_input':'editInput2'"
? maxlength="500"
? @blur="save($event,scope.row)"
? @focus="()=>rowClick(index,scope.$index)"
? autosize
? clearable>
</el-input>
data里先定義input_type:'text'
在獲取數(shù)據(jù)的時(shí)候改變input_type為textarea 即可
總結(jié)：其實(shí)兩種方案都是為了讓輸入框能重新計(jì)算高度，只不過第二種更簡單，推薦?。▋H供參考）
