eltable 新增行 不写序号
时间: 2023-08-14 21:16:04 浏览: 41
如果您在 el-table 中新增一行数据时,不想手动为这行数据赋值序号,可以使用 el-table 的 append 方法来自动为新增的行数据赋值序号。
1. 在 el-table 标签中添加 ref 属性,例如:`<el-table ref="table" :data="tableData">`
2. 在 Vue 实例中定义 addRow 方法,例如:
```
methods: {
addRow() {
// 新增一行数据
const newRow = {
// 其他字段
};
this.tableData.push(newRow);
// 获取新增行在表格中的序号
const index = this.$refs.table.store.states.data.length;
// 更新新增行的序号
this.$nextTick(() => {
const rows = this.$refs.table.$el.querySelectorAll('.el-table__row');
const lastRow = rows[rows.length - 1];
const indexCell = lastRow.querySelector('.cell.index');
if (indexCell) {
indexCell.innerText = index;
}
});
}
}
```
3. 在 el-table-column 标签中添加 label 属性来显示表头,例如:`<el-table-column label="序号" type="index"></el-table-column>`
这样就可以在 el-table 中新增一行数据时,自动为其赋值序号了。
阅读全文