使用el-table显示一个列表,字段有车间、产线、产品型号
时间: 2024-01-27 14:06:30 浏览: 91
你可以使用 Element UI 的 `el-table` 组件来展示这个列表。首先,需要在 Vue 组件中引入 `el-table` 和相关的样式文件:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="workshop" label="车间"></el-table-column>
<el-table-column prop="productionLine" label="产线"></el-table-column>
<el-table-column prop="productModel" label="产品型号"></el-table-column>
</el-table>
</div>
</template>
<script>
import { Table, TableColumn } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {
components: {
'el-table': Table,
'el-table-column': TableColumn
},
data() {
return {
tableData: [
{ workshop: 'A车间', productionLine: '1号线', productModel: '型号1' },
{ workshop: 'B车间', productionLine: '2号线', productModel: '型号2' },
{ workshop: 'C车间', productionLine: '3号线', productModel: '型号3' }
]
}
}
}
</script>
```
在这个例子中,我们使用了 `el-table` 组件,并在 `el-table` 中定义了三个列,分别对应车间、产线和产品型号这三个字段。我们使用了 `prop` 属性来指定每个列对应的数据属性,这些数据属性需要在 `tableData` 数组中定义。最后,我们在 `data` 中定义了一个 `tableData` 数组,包含了三个对象,每个对象都包含了车间、产线和产品型号这三个属性的值。
注意,在使用 `el-table` 组件之前,需要先在 Vue 组件中引入 `el-table` 和相关的样式文件,这里我们使用了 Element UI 提供的 `Table` 和 `TableColumn` 组件。如果你使用的是 Vue CLI 创建的项目,可以在 `main.js` 中引入 Element UI:
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
阅读全文