使用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>