标签：loading cascade search push expand 钉钉 sele 代码 自己
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>
即在
标签：loading cascade search push expand 钉钉 sele 代码 自己
原文地址：https://www.cnblogs.com/wzfwaf/p/11790861.html
