element-ui in detail various forms and tabular method. There tableExpand two styles appeared, but did not form two nested table program, so he wrote a style is as follows:
After expansion follows
This is a common two nested tables, using the el-table type = "expand";
HTML code is as follows:
<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="成本价"></ the-table-column> <column near-the-table ="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=" Please enter cost " > </ EL-INPUT> </ span> <span> <Model EL-V-INPUT = " Search " placeholder = " Please enter the sale price " > </ EL-INPUT> </ span > <span> <EL-iNPUT V-Model = " Search " placeholder = " Please enter the discount " > </ 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>"article tag" <Table-EL-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>
That is
<el-table
border
:data="tableData"
@expand-change="expandChange"
v-loading="loading"
style="width: 100%"
>
The next line inserted
<El-table-column type = "expand"> </ el-table-column>. Spreadsheet-style will be asked to write in them. The Value of a sub table is passed along with the data level, this is a synchronous load can cause large amount of data. But the time to write back to simpler, asynchronous loading method can also be used. When performing a function to expand a table, retrieval of data after the background data on the background data in a children or children property as a plus one, into which the data. The code above is to use this method.
js Correspondingly, it is no longer made it again, to write according to their specific requirements on the line. There is a need in the source code! I can comment area.
Hope it will help you.