el-table表格每一行前三列固定为一列,后几列要可以动态新增或删除行,代码要怎么实现
时间: 2024-03-27 12:40:22 浏览: 80
要实现这种固定列和可滚动列的表格,可以使用element-ui中的el-table组件,并设置固定列的宽度和滚动区域的宽度。
以下是一个示例代码:
```
<el-table :data="tableData" style="width: 100%">
<el-table-column label="固定列1" width="100"></el-table-column>
<el-table-column label="固定列2" width="100"></el-table-column>
<el-table-column label="固定列3" width="100"></el-table-column>
<el-table-column label="滚动列1"></el-table-column>
<el-table-column label="滚动列2"></el-table-column>
<el-table-column label="滚动列3"></el-table-column>
<el-table-column label="滚动列4"></el-table-column>
</el-table>
```
在上面的代码中,前三列固定宽度为100,后面的列没有设置宽度,表示可以滚动。这样就可以实现固定列和可滚动列的表格了。
同时,如果需要动态新增或删除行,只需要修改tableData数组中的数据即可。例如:
```
data() {
return {
tableData: [
{ col1: '1', col2: '2', col3: '3', col4: '4', col5: '5', col6: '6', col7: '7' },
{ col1: '1', col2: '2', col3: '3', col4: '4', col5: '5', col6: '6', col7: '7' },
{ col1: '1', col2: '2', col3: '3', col4: '4', col5: '5', col6: '6', col7: '7' }
]
}
},
methods: {
addRow() {
this.tableData.push({ col1: '1', col2: '2', col3: '3', col4: '4', col5: '5', col6: '6', col7: '7' })
},
deleteRow(index) {
this.tableData.splice(index, 1)
}
}
```
上面的代码中,addRow方法可以在tableData数组中新增一行数据,deleteRow方法可以删除tableData数组中的某一行数据。