使用idea中的vue做一个xmlde简单的产品信息列表,包含序号,名称,型号,规格,删除操作
时间: 2024-05-04 13:15:13 浏览: 110
1. 新建一个Vue项目,引入Vue.js和Element UI
2. 在App.vue中添加一个table组件,设置表头和数据源
3. 在data中定义一个数组products,包含多个产品信息对象,每个对象包含序号、名称、型号、规格等属性
4. 在table组件中使用v-for指令循环渲染products数组中的数据,并添加删除按钮
5. 在methods中添加一个deleteProduct方法,用于删除指定的产品信息对象
6. 在页面中绑定删除按钮的点击事件,调用deleteProduct方法删除对应的产品信息对象
示例代码如下:
```html
<template>
<div>
<el-table :data="products">
<el-table-column prop="id" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="model" label="型号"></el-table-column>
<el-table-column prop="spec" label="规格"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="deleteProduct(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
products: [
{
id: 1,
name: '产品1',
model: '型号1',
spec: '规格1'
},
{
id: 2,
name: '产品2',
model: '型号2',
spec: '规格2'
},
{
id: 3,
name: '产品3',
model: '型号3',
spec: '规格3'
}
]
}
},
methods: {
deleteProduct(index) {
this.products.splice(index, 1);
}
}
}
</script>
```
阅读全文