点击按钮弹出模态框实现详情：/qq_20565303/article/details/78734592
结果：
代码：
<template><div class="content"><table class="layui-table"><thead><tr><th style="width:100px">姓名</th><th style="width:100px">操作</th></tr></thead><tbody><tr v-for="(item ,index) in ybmData" :key="index"><td>{{item.Name}}</td><td><buttontype="button"style="margin-top:2px"class="layui-btn layui-btn-xs"@click="showModal2(item.Score)">成绩查看</button></td></tr></tbody></table><div id="myModal" class="modal"><div class="modal-content"><div class="modal-header"><h2>头部</h2></div><div class="modal-body"><div v-if="ItemScores!=null &&ItemScores.length>0"><div v-for="(item1,index1) in ItemScores" :key="index1"><p class="content1"><span class="content2">{{ item1.one}}:</span><span class="content3 content5">{{ item1.two }}</span></p></div></div><div v-else><p class="content1"><span class="content3 content4">您还没有成绩哦！</span></p></div></div><div class="modal-footer"><button id="closeBtn" class="close" @click="close">关闭</button></div></div></div></div></template><script>export default {data() {return {ybmData: [{Name:"xasx",Score:[{one:'1',two:'2'},{one:'2',two:'3'}]},{Name:"ff",Score:[{one:'3',two:'4'},{one:'5',two:'6'}]},{Name:"vdf",Score:null},],ItemScores:null,};},methods: {showModal2(item) {document.getElementById("myModal").style.display = "block";this.ItemScores=item;console.log(item)},close() {document.getElementById("myModal").style.display = "none";},},};</script><style scoped>/*模态框*/.modal {display: none;/* 默认隐藏 */position: fixed;/* 根据浏览器定位 */z-index: 1;/* 放在顶部 */left: 0;top: 0;width: 100%;/* 全宽 */height: 100%;/* 全高 */overflow: auto;/* 允许滚动 */background-color: rgba(0, 0, 0, 0.4);/* 背景色 */}/*模态框内容*/.modal-content {display: flex;/*采用flexbox布局*/flex-direction: column;/*垂直排列*/position: relative;background-color: #fefefe;margin: 15% auto;/*距顶部15% 水平居中*/padding: 20px;border: 1px solid #888;width: 80%;/* animation: topDown 0.4s; *//*自定义动画，从模态框内容上到下出现*/}@keyframes topDown {from {top: -300px;opacity: 0;}to {top: 0;opacity: 1;}}/*模态框头部*/.modal-header {display: flex;/*采用flexbox布局*/flex-direction: row;/*水平布局*/align-items: center;/*内容垂直居中*/justify-content: space-between;}/*关闭X 样式*/.modal-footer {display: flex;align-items: center;}.close {display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer;background-color: #1e9fff;color: #fff;opacity: 0.5;margin: 0 auto;}.close:hover {background-color: #1e9fff;opacity: 1;}.modal-body {font-size: 18px;}.content{width: 1090px;margin: 0 auto;}.content1 {padding-bottom: 10px;text-align: center;}.content1 .content2 {padding-right: 5px;}.content1 .content3 {font-weight: bolder;}.content1 .content4 {display: inline-block;color: red;padding-bottom: 10px;}.content1 .content5 {padding-left: 10px;}.content1 .content6 {padding-left: 5px;}</style>
注意：如果从后端获取的对象中数组形式是字符串，记得一定要JSON.parse(数组字段);
表格、按钮使用了layui来写，如果不用，可自己修改样式
