element-ui中有詳細的各種表格及表格方法。也有表格展開出現二級的樣式，但是卻沒有表格嵌套二級表格的方案，於是就自己寫了一個，樣式圖如下：
展開后如下
這就是一個普通的二級表格嵌套，用的是el-table中的type="expand"；
HTML代碼如下：
<div class="service-center"> <el-table border :data="tableData" @expand-change="expandChange" v-loading="loading" style="width: 100%" > <el-table-column type="expand"> <template slot-scope="scope"> <el-table :data="scope.row.children" style="width: calc(100% - 47px)" class="two-list"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="city_name" label="城市"></el-table-column> <el-table-column prop="price" label="成本價"></el-table-column> <el-table-column prop="sale_price" label="售出價"></el-table-column> <el-table-column prop="discount_price" label="折扣價"></el-table-column> <el-table-column prop="product_online_time" label="上架時間"></el-table-column> <el-table-column prop="product_off_time" label="下架時間"></el-table-column> <el-table-column></el-table-column> <el-table-column></el-table-column> <el-table-column prop="cat_id" label="狀態"> <template slot-scope="scope"> <span v-if="scope.row.is_online ==1"> <span style="color:#00B46D">上架</span> </span> <span v-else> <span style="color:#D75C89">下架</span> </span> </template> </el-table-column> <el-table-column prop="cat_id" label="新增"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button> <el-button @click="lowershelf(scope.row)" type="text" size="small" v-if="scope.row.is_online ==1" >下架</el-button> <el-button @click="upshelf(scope.row)" type="text" size="small" v-else>上架</el-button> </template> </el-table-column> </el-table> <div class="newpushcity"> <span> <el-cascader :options="optionsZone" :props="propsArea" placeholder="請選擇注冊地區" v-model="seartharea" class="threearea" @change="changearea" ></el-cascader> </span> <span> <el-input v-model="search" placeholder="請輸入成本價"></el-input> </span> <span> <el-input v-model="search" placeholder="請輸入售出價"></el-input> </span> <span> <el-input v-model="search" placeholder="請輸入折扣價"></el-input> </span> <span> <el-date-picker v-model="updata" type="date" placeholder="選擇上架時間"></el-date-picker> </span> <span> <el-date-picker v-model="lowdata" type="date" placeholder="選擇下架時間"></el-date-picker> </span> <span>保存</span> </div> </template> </el-table-column> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="product_id" label="ID"></el-table-column> <el-table-column label="商品名稱" prop="name"></el-table-column> <el-table-column label="商品構成" prop="name"> <template slot-scope="scope"> <span v-if="scope.row.sku.length==1"> <span>{{scope.row.sku[0].sku_name}}</span> </span> <span v-if="scope.row.sku.length==2"> <span>{{scope.row.sku[0].sku_name}}+{{scope.row.sku[1].sku_name}}</span> </span> </template> </el-table-column> <el-table-column label="商品描述" prop="spu_desc"></el-table-column> <el-table-column label="支付方式" prop="pay_type"> <template slot-scope="scope"> <span v-if="scope.row.pay_type==1"> <span>全款</span> </span> <span v-if="scope.row.pay_type==2"> <span>預付款支付</span> </span> <span v-else> <span></span> </span> </template> </el-table-column> <el-table-column label="渠道" prop="from_type"> <template slot-scope="scope"> <span v-if="scope.row.from_type ==1"> <span>共道</span> </span> <span v-if="scope.row.from_type ==2"> <span>個人代賬</span> </span> <span v-if="scope.row.from_type ==3"> <span>電商園區</span> </span> <span v-if="scope.row.from_type ==4"> <span>釘釘</span> </span> <span v-if="scope.row.from_type ==5"> <span>app</span> </span> <span v-if="scope.row.from_type ==6"> <span>官網</span> </span> <span v-if="scope.row.from_type ==7"> <span>阿里雲</span> </span> <span v-if="scope.row.from_type ==8"> <span>阿里雲市場</span> </span> <span v-else> <span></span> </span> </template> </el-table-column> <el-table-column label="商品類目" prop="product_type"> <template slot-scope="scope"> <span v-if="scope.row.product_type==1"> <span>代賬</span> </span> <span v-if="scope.row.product_type==2"> <span>工商</span> </span> <span v-if="scope.row.product_type==3"> <span>套餐</span> </span> <span v-if="scope.row.product_type==4"> <span>其他</span> </span> <span v-else> <span></span> </span> </template> </el-table-column> <el-table-column label="商品標簽" prop="product_sign"></el-table-column> <el-table-column label="狀態" prop="is_online"> <template slot-scope="scope"> <span v-if="scope.row.is_online ==1"> <span style="color:#00B46D">上架</span> </span> <span v-else> <span style="color:#D75C89">下架</span> </span> </template> </el-table-column> <el-table-column label="操作" prop="pay"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button> <el-button @click="lowershelf(scope.row)" type="text" size="small" v-if="scope.row.is_online ==1" >下架</el-button> <el-button @click="upshelf(scope.row)" type="text" size="small" v-else>上架</el-button> </template> </el-table-column> </el-table> </div>
即在
<el-table
border
:data="tableData"
@expand-change="expandChange"
v-loading="loading"
style="width: 100%"
>
的下一行插入
<el-table-column type="expand"></el-table-column>。將子表格的要求樣式寫在其中。而子表格的取值是隨上一級的數據一起傳的，這樣是同步加載，會造成數據量較大。但是寫的時候回簡單一些，也可以用異步加載的方法。在展開一級表格的時候執行一個函數，調取后台數據后將后台數據放在上一級數據的children中，或者為上一級加一個children屬性，將數據放入其中。上面的代碼就是用這種方法。
js與之相對應，就不再發一遍了，根據自己的具體要求來寫就行了。有需要源碼的可以在評論區@我。
希望能對你有幫助。