el-descriptions与el-table 使用
时间: 2023-10-14 18:18:37 浏览: 257
el-descriptions 是 Element UI 中的一个组件,用于展示数据的详细描述信息。一般情况下,它与其他 Element UI 的组件(如 el-table)一起使用。
el-descriptions 可以通过 props 来配置展示的数据,如 label-width、border、column、size 等。我们可以在 el-table 中使用 el-descriptions 来展示每一行数据的详细信息。具体实现方式如下:
1. 在 el-table 中的每一行数据中添加一个 el-descriptions 组件
```
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleView(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column label="详细信息">
<template slot-scope="scope">
<el-descriptions :column="1" :border="false">
<el-descriptions-item label="姓名">{{ scope.row.name }}</el-descriptions-item>
<el-descriptions-item label="地址">{{ scope.row.address }}</el-descriptions-item>
<el-descriptions-item label="电话">{{ scope.row.tel }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ scope.row.gender }}</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
</el-table>
</template>
```
2. 在 el-table 中添加一个查看详情的方法 handleView,用于展示当前行的详细信息
```
methods: {
handleView(row) {
this.dialogVisible = true
this.currentRow = row
}
}
```
3. 在弹出框中使用 el-descriptions 组件展示当前行的详细信息
```
<template>
<el-dialog :visible.sync="dialogVisible">
<el-descriptions :column="1" :border="false">
<el-descriptions-item label="姓名">{{ currentRow.name }}</el-descriptions-item>
<el-descriptions-item label="地址">{{ currentRow.address }}</el-descriptions-item>
<el-descriptions-item label="电话">{{ currentRow.tel }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ currentRow.gender }}</el-descriptions-item>
</el-descriptions>
</el-dialog>
</template>
```