在vue2中给我一个使用el-table组件的例子,有3条数据,要求第一行的表头有“车辆名”,“车辆简称”,“车辆编号”,“车辆品牌”,“车辆价格”和“操作”,其中操作内,是两个按钮,修改和删除,请给我完整的带实例
时间: 2024-01-04 08:02:04 浏览: 109
好的,下面是一个使用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" @click="handleEdit(scope.row)">修改</el-button>
<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万'
}
]
}
},
methods: {
handleEdit(row) {
// 编辑操作
},
handleDelete(index) {
// 删除操作
}
}
}
</script>
```
在上述代码中,我们使用了el-table和el-table-column组件来实现表格的展示。其中,el-table-column组件的prop属性指定了对应列的数据字段,label属性指定了表头文字。
在“操作”列中,我们使用了slot-scope指令来自定义列的内容。在列的内容中,我们使用了el-button组件来创建两个按钮(修改和删除),并分别绑定了handleEdit和handleDelete方法。
注意:为了使用el-table和el-table-column组件,我们需要在Vue项目中引入Element UI库。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)