如果合并行的话后端无法返回标识,前端无法做出判断。
一行中返回多条数据,通过判断数组每一项是否有数据主要通过visibility这个css属性来控制隐藏并占位
<el-table-column label="juejin" prop="ext2">
<template #default="scope">
<!-- 判断当前这条数据是否为数组 是数组的话循环 -->
<template v-if="Array.isArray(scope.row.ext2)">
<template v-for="item of scope.row.ext2" :key="item">
<!-- 这个tooltip组件封装的 我之前有个封装的文章,目的超出父元素自动省略号并出现tooltip显示完整内容 -->
<tooltip v-if="item" :text="item" />
<!-- 后端给的当前项如果是空字符串的话,visibikity:hidden 隐藏元素但是起到占位的作用,防止多条数据下面一条数据独自向上面移动 -->
<div v-else style="visibility:hidden">a</div>
</template>
</template>
<!-- 反之不是数组直接渲染 只有一条 -->
<template v-else>
<tooltip :text="scope.row.ext2" />
</template>
</template>
</el-table-column>