Element中使用el-form-item内部el-input为textarea时由于自生成的.el-form-item__content导致无法设置textarea百分比宽度问题解决

需求

使用ElementUI创建一个网上书店系统时，一个界面需要实现一个弹出框上提交一个较多信息的表单的效果。需求类似于下图。

前提条件

由于表单内容较多，设置其格式为小尺寸和行内元素

<el-form :model="book" size="small" inline="true">

对于上方两个公用一行的表单项，按照以下模板设置。

<el-form-item label="书名" :label-width="formLabelWidth" style="width: 45%;">
	<el-input v-model="book.name" autocomplete="off" suffix-icon=“xxxx”></el-input>
</el-form-item>
<el-form-item label="作者" :label-width="formLabelWidth" style="width: 45%;">
	<el-input v-model="book.name" autocomplete="off" suffix-icon=“xxxx”></el-input>
</el-form-item>

问题

在写简介的多行文本框时，出现问题。
按照模板写的代码如下。其中除少量参数不同外基本与模板相同。

<el-form-item label="简介" :label-width="formLabelWidth" style="width: 90%; display: block;">
	<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="book.intro" style="width: 100%">
	</el-input>
</el-form-item>

出现问题

可以发现，即使是在HTML代码中给每一层都设置了width百分比，下面的文本框却没有按照预期的百分比宽度出现。
进一步分析，将最内层的textview宽度设置成固定较大的像素500px，界面可以正常渲染。

问题分析

在谷歌浏览器中使用开发者工具分析DOM结构


发现在我们写的两个控件之间，element自动为我们生成了一个class为el-form-item__content的div。正是这个div阻断了我们的百分比向下的传递路径。使用百分比宽度/高度，必须是在父控件宽度/高度确定的时候。
由于该div根本没有在我们的HTML文档中出现，所以在不修改Element源码的前提下，可以使用CSS样式覆盖的方式解决。
要想运用此方法，我们需要先对CSS的权重和继承有一定的了解，同时要对如何进行CSS覆盖有一个基本的认识。接下来的操作只用到了其中的基本内容，但如果读者对此全无了解，推荐先花上20分钟去阅读相关博客，网上有很多写的很详细的文章。

问题解决

首先在HTML中给出问题的el-form-item加上一个div，并设置其class为aa。

<div class="aa">
	<el-form-item label="简介" :label-width="formLabelWidth" style="width: 90%; display: block;">
		<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="book.intro" style="width: 100%">
		</el-input>
	</el-form-item>
</div>

接着我们在开发者工具中找到el-form-item__content最上层的继承样式。

最后我们在源Vue文件的CSS中，设置同时继承于aa和刚刚找到的最上层各个类的样式。

.aa .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__labe {
	width: 83%;
}

得到如图所示的结果，可以看的该textview的width已经被正常设置

需要注意的是，仅作上述设置仍然不能使得“简介”标签和textview被很精确的控制，当百分比设置的不对时，可能出现“简介”标签被挤到其他行，控件两边边距不好控制视觉效果很差等情况。其原因是因为在el-form-item生成时，包括“简介”标签在内许多元素都产生了类似于本文所述问题的加块包裹。另外此时再次观察上面的短文本框的模板可发现，我们并没有去对其去进行精确的设置。因此要想精确把控这个界面的布局，是需要花很多精力的，由于笔者感觉通过调整参数（width = 83%）取得的整体视觉效果已经可以接受，所以不再对其去进行精确设计确保各行宽度一直标签对齐等。

放在最后

本问题是由于element框架的生成机制破坏了我们的百分比继承。解决此问题的过程有些过于繁琐了，而且涉及到了对于源码的理解和对于前端初学者比较困难的样式覆盖，不应该是element框架问题的正常解决方式。
猜测应该是有更优雅的方式，比如说百分比布局并不适合于element的form，或者element的form有某些特定的写法。
最后，笔者只是一个前端初学者，自认为连入门都还没有做到。文中恐有无数不准确或错误的地方，还望读者包容。

参考

https://segmentfault.com/q/1010000019041279