在vue画可编辑表格

way1：尝试过el-table，但是el-table的画风是这样的，

只能是一类的，而且我只找到了纵向的，不行，想画出这样的报名表就是不可能的

于是，转用table

见

https://www.cnblogs.com/wanna-lipeng/p/11823071.html
但是表头不能要

就是这些
于是转用横向表格table

<table border="1"  align="center" cellpadding="10"  cellspacing="0" >
		  		<caption>
		  		<h2>考试报名表</h2>
		  		</caption>
		  		<tbody align="center">
		  				<th>姓名</th>
		  				<td width="100" colspan="1" rowspan="1"></td>
		  				//width表示宽度，colspan表示占几列，rowspan表示占几行
		  				<th>性别</th>
		  				<td width="100" rowspan="1"></td>
		  		</tbody>
</table>

<th>姓名</th> //姓名用这个

空格是用<td></td>

要求:报名表的表格可编辑
way1：https://blog.csdn.net/qq_23350817/article/details/84625165
使用的是在<td></td>加上contentEditable="true"
成了这样

<table border="1"  align="center" cellpadding="10"  cellspacing="0" >
		  		<caption>
		  		<h2>考试报名表</h2>
		  		</caption>
		  		<tbody align="center">
		  				<th>姓名</th>
		  				<td width="100" colspan="1" rowspan="1" contentEditable="true"></td>
		  				//width表示宽度，colspan表示占几列，rowspan表示占几行
		  		</tbody>
</table>

出现的效果是这样的，

但是，我用的是vue+elment-ui，使用这种方法暂且不知道怎么和后端交互，
目前已知的只有el-item-form的prop和el-input的v-model和后端交互。

way2：使用el-item-form和el-input

<th >姓名</th>
      <td width="100" colspan="2">
			<el-item-form prop="name">
				<el-input v-model="dataTest.name">									 
				</el-input>
			</el-item-form>
	</td>

出现的效果是这样的：

在表格内部有一个输入框，绑定要与后端交互的数据值
=>这样就能得到，
报名表的样式，和普通vue+elmentui输入框的内心了。