dataList: [{ name: '张三', id: '100345', post: '售前工程师', list: [ { label: '员工1', size: 10 }, { label: '员工2', size: 10 }, ], part: '市场部', self: '94', superior: '90', score: '87', level: 'A' }, { name: '张三', id: '100345', post: '售前工程师', list: [ { label: '员工1', size: 10 }, { label: '员工2', size: 10 }, ], part: '市场部', self: '94', superior: '90', score: '87', level: 'A' }, { name: '张三', id: '100345', post: '售前工程师', list: [ { label: '员工1', size: 10 }, { label: '员工2', size: 10 }, ], part: '市场部', self: '94', superior: '90', score: '87', level: 'A' }] element-ui使用table表格 list中table为表头 size为值 展示
时间: 2024-01-27 11:04:01 浏览: 60
ng-datalist:AngularJS指令提供带有可搜索下拉列表的文本输入
你可以使用 Element UI 中的 Table 组件来展示 dataList 的数据。首先,你需要在页面中引入 Element UI 的样式文件和 JavaScript 文件。
然后,你可以使用以下代码来创建一个基本的表格:
```html
<template>
<el-table :data="dataList" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="post" label="职位"></el-table-column>
<el-table-column prop="part" label="部门"></el-table-column>
<el-table-column prop="self" label="自评"></el-table-column>
<el-table-column prop="superior" label="上级评分"></el-table-column>
<el-table-column prop="score" label="评分"></el-table-column>
<el-table-column prop="level" label="等级"></el-table-column>
<el-table-column label="员工列表">
<template slot-scope="{ row }">
<el-table :data="row.list" style="width: 100%">
<el-table-column prop="label" label="员工"></el-table-column>
<el-table-column prop="size" label="值"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
```
这段代码中,我们使用了 `v-for` 指令来遍历 `dataList` 数组,并在表格中显示每个对象的属性。对于 `list` 属性,我们使用了嵌套的表格来展示每个员工的信息。
注意,你需要根据实际情况调整表格的样式和布局。你可以根据需要添加其他列或修改列的属性。
希望这可以帮助到你!如果还有其他问题,请随时提问。
阅读全文