需求:
从后台请求到的数据,是数组,需要用table展示,数组里面有一个属性也是数组。想让属性的数组在table里分行显示。
代码:
只需要在 el-table-column 使用 插槽 遍历数组就行了(可以用div,div是块级元素,每一个div不会在一行里面显示)
想要拿到表格的数据 需要通过 scope.row.属性名 就能拿到(也可以拿到这一行其他属性的数据,只需要修改属性名就可以了)
<el-table-column。。。。。>
<template slot-scope="scope">
<div v-for="(item,index)in scope.row.xxx" :key="index">
{{ item }}
</div>
</template>
</el-table-column>
另外:
如果想要在表格里加按钮,同样用 插槽 ,通过拿到这一行的数据,在方法里面写点击事件(最常用的应该是弹窗)
<el-table-column .....>
<template slot-scope="scope">
<el-button
type="text"
size="medium"
@click="onClick(scope.row.xxx)"
>{{ 查询 }}</el-button
>
</template>
</el-table-column>
包括图片等等什么的,都可以用插槽,重要是它可以拿到这一行的数据,根据拿到的数据进行各种操作。