在vue2中给我一个使用el-table组件的例子,有6条数据,要求第一行的表头有“车辆名”,“车辆简称”,“车辆编号”,“车辆品牌”,“车辆价格”和“操作”,其中操作内是一个按钮,删除,点击删除的时候,会删掉这条数据,请给我完整的代码实例
时间: 2024-01-05 19:02:18 浏览: 73
好的,下面是一个使用el-table组件的示例代码,满足您的要求:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="车辆名"></el-table-column>
<el-table-column prop="shortName" label="车辆简称"></el-table-column>
<el-table-column prop="id" label="车辆编号"></el-table-column>
<el-table-column prop="brand" label="车辆品牌"></el-table-column>
<el-table-column prop="price" label="车辆价格"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '奔驰',
shortName: 'Benz',
id: '001',
brand: '德系',
price: '100万'
},
{
name: '宝马',
shortName: 'BMW',
id: '002',
brand: '德系',
price: '80万'
},
{
name: '保时捷',
shortName: 'Porsche',
id: '003',
brand: '德系',
price: '150万'
},
{
name: '特斯拉',
shortName: 'Tesla',
id: '004',
brand: '美系',
price: '90万'
},
{
name: '法拉利',
shortName: 'Ferrari',
id: '005',
brand: '意系',
price: '200万'
},
{
name: '兰博基尼',
shortName: 'Lamborghini',
id: '006',
brand: '意系',
price: '250万'
}
]
}
},
methods: {
handleDelete(index) {
this.tableData.splice(index, 1);
}
}
}
</script>
```
在上述代码中,我们使用了el-table和el-table-column组件来实现表格的展示。其中,el-table-column组件的prop属性指定了对应列的数据字段,label属性指定了表头文字。
在“操作”列中,我们使用了slot-scope指令来自定义列的内容。在列的内容中,我们使用了el-button组件来创建一个删除按钮,并绑定了handleDelete方法。
handleDelete方法会获取当前行的索引,然后使用splice方法将其从tableData数组中删除。这样,当我们点击删除按钮时,对应的数据行就会从表格中移除。
阅读全文