el-table 添加一个空行
时间: 2023-10-18 08:24:06 浏览: 138
LayUI table新增空白行
你可以在 el-table 的数据源添加一条空数据,这样表格就会多出一行空行。下面是一个示例:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Mary', age: 18 },
// 添加一条空数据
{ name: '', age: '' }
]
}
}
}
```
这样,el-table 就会显示出一行空行,你可以在里面输入新数据。但是需要注意的是,如果你在编辑状态下点击了空行,可能会出现错误,因为空行没有数据。如果你需要支持编辑空行,可以在 el-table 上设置 `row-key` 属性,这样每一行都会有一个唯一的标识符,避免编辑时出现问题。
阅读全文