使用elementui创建一个可展开子项的表格 首先引入样式<script src="public/lib/vue/vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="public/lib/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="public/lib/element-ui/lib/index.js"></script><div> <el-table :data="tableData" style="width: 100%" row-key="id" border lazy :stripe=true @expand-change="expandChange" v-loading="loading" size='small'> <el-table-column type="expand" label="" width=""> <template slot-scope="props"> <el-table :data="props.row.child" style="width: 100%" row-key="id" border size='small'> <el-table-column prop="Itemname" label="项目名称"> </el-table-column> <el-table-column prop="Itemresult" label="结果"> </el-table-column> <el-table-column prop="Itemunit" label="项目单位"> </el-table-column> <el-table-column prop="Refrange" label="参考范围"> </el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="patient_name" label="姓名"> </el-table-column> <el-table-column prop="GenderName" label="性别"> </el-table-column> <el-table-column prop="Age1" label="年龄"> </el-table-column> <el-table-column prop="ReportTime" label="报告时间" show-overflow-tooltip> </el-table-column> <el-table-column prop="doctor_inspect_code" label="条码号"> </el-table-column> <el-table-column prop="Barcode" label="千麦条码号"> </el-table-column> <el-table-column prop="mobile_phone" label="病人电话"> </el-table-column> <!-- <el-table-column prop="paper_type" label="报告规格"> </el-table-column> --> <el-table-column prop="inspect_name" label="检测项目"> </el-table-column> <el-table-column prop="TestDate" label="检测时间" show-overflow-tooltip> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="viewPDF(scope.row.PDF)" type="text" size="small">检验报告</el-button> <!-- <el-button type="text" size="small">编辑</el-button> --> </template> </el-table-column> </el-table> </div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="20" layout="total, prev, pager, next" :total=total> </el-pagination> </div><script> new Vue({ el: '#app', //el用于指定当前Vue实例为哪个容器服务，值通常为选择器字符串。 data: { //data中用于存储数据，数据供el所指定的容器去使用。 loading: false, total:100, tableData: [], idCardCode:'' }, mounted() { this.getinfoajaxQM(); }, methods: { getinfoajaxQM(page) { var that = this; that.loading=true $.ajax({ type: 'POST', url: 'index.php?f=report/c_patient_report&c=CPatientReport&m=getinfoajaxQM', data: { pageSeq:page, idCardCode:that.idCardCode }, dataType: 'json', success: function (obj) { that.loading=false that.tableData = obj.data that.total = obj.total }, error: function (xhr, xhrStatus) { }, }); }, expandChange(row){ console.log(row) }, viewPDF(Url){ if(Url) { window.open(Url,'_blank'); } }, handleCurrentChange(val){ this.getinfoajaxQM(val) }, bySearch(){ this.getinfoajaxQM(1) } } }) </script>