需求:基于elementui在表格里面可输入
程序员文章站
2022-06-07 11:16:43
...
需求:基于elementui在表格里面可输入
要怎么实现呢?我们的思路肯定是在表格里面放input,然后把input边框隐藏起来,就可以做到表格可输入
//template里
<table>
<tr>
<th>地区</th>
<th>人数</th>
</tr>
<tr>
<td>上海区</td>
<td>
<el-input v-model="dataForm.rmks" style="border: none"></el-input>
</td>
</tr>
<tr>
<td>北京区</td>
<td>
<el-input v-model="dataForm.seq" style="border: none"></el-input>
</td>
</tr>
</table>
//scss里面写入,主要是深度选择器可以隐藏input边框
table, th, td {
border: 1px solid #d6d6d6;
border-collapse: collapse;
border-spacing: 0;
}
table {
td, th {
padding: 0;
}
td {
text-align: center;
/deep/ .el-input__inner {
border: none
}
}
width: 100%;
}