element table组件使用过程的一些问题记录(刷新,排序,扩展)
UI给出的设计图是这样的1 扩展要求点击运单号,显示更多内容,element里面给出的例子是有扩展符号的一列,点击来展示这里我想了下,把这一列隐藏起来了然后点击的时候用rowClick 这个事件来进行展开,这里也借鉴了下网上搜来的思路vue代码见下generateUUID() { //生成唯一编码var d = new Date().getTime();var uuid = '...
·
UI给出的设计图是这样的
1 扩展
要求点击运单号,显示更多内容,
element里面给出的例子是有扩展符号的一列,点击来展示
这里我想了下,把这一列隐藏起来了
然后点击的时候用rowClick 这个事件来进行展开,这里也借鉴了下网上搜来的思路
vue代码见下
generateUUID() { //生成唯一编码 var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random()*16)%16 | 0; d = Math.floor(d/16); return (c=='x' ? r : (r&0x3|0x8)).toString(16); }); return uuid; }, rowClick(row, event, column) { Array.prototype.remove = function (val) { let index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; if(column.label == '运单号'){ // 只有点击运单才展开 Array.prototype.remove = function (val) { let index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; if (this.entexpands.indexOf(row.id) < 0) { this.entexpands= []; row.id = this.generateUUID(); this.entexpands.push(row.id); } else { this.entexpands.remove(row.id); } } },
css部分
.el-table__expand-icon{ display: none; }
html
<el-table class="spHeight" @sort-change="sortTable" :data="orderTableData" style="width: 100%" :cell-class-name="cellClassName" row-key="id" :expand-row-keys="entexpands" @row-click="rowClick" ref="multipleSelection"> <el-table-column label="序号" type="index" > </el-table-column> <el-table-column sortable label="运单号" prop="waybillNo" width="100" class-name="highlight-blue"> </el-table-column> <el-table-column type="expand" width="20"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <div v-for="item in props.row.orderInfoDto.supServiceSubOrderDtoList"> <el-form-item label="子单号:" class="expand-line-subOrder" v-if="props.row.orderInfoDto.supServiceSubOrderDtoList.length != 1"> <span>{{ item.subOrderNo }}</span> </el-form-item> <el-form-item label="重量(kg):" class="expand-line-subOrder" > <span>{{ item.weight }}</span> </el-form-item> <el-form-item label="体积(cm^3):" class="expand-line-subOrder" > <span>{{item | volume}}</span> </el-form-item> </div> <el-form-item label="发件人地址:" class="expand-line-Order"> <span>{{props.row.orderInfoDto.fromAddress | address}} </span> </el-form-item> <el-form-item label="收件人地址:" class="expand-line-Order"> <span>{{props.row.orderInfoDto.toAddress | address }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column sortable label="产品" prop="productName" width="250"> </el-table-column> <el-table-column sortable label="总重(kg)" prop="weight"> </el-table-column> <el-table-column sortable label="始发地" prop="shipperAddress"> </el-table-column> <el-table-column sortable label="目的地" prop="consigneeAddress"> </el-table-column> <el-table-column v-if="req.supOrderStatus == 102" label="下单时间" sortable prop="createTime"> </el-table-column> <el-table-column v-if="req.supOrderStatus == 103" label="入库时间" sortable prop="receGoodTime"> </el-table-column> <el-table-column v-if="req.supOrderStatus == 104" label="出库时间" sortable prop="outGoodTime"> </el-table-column> </el-table>
2 清空搜索
另外这是个Tab切换的表格,如果切换的时候,要刷新表格,之前的排序要清空,这里表上加上了ref="multipleSelection"
tab切换的时候执行 this.$refs.multipleSelection.clearSort();
更多推荐
已为社区贡献10条内容
所有评论(0)