本文目录
el-table的expand怎么掉接口
需求：很简单，返回表格数据的时候没有展开行区域的数据，只在展开的时候再单独调接口，这样后台处理数据更快一点。但是真正写起来坑还不少。在这里插入图片描述坑一：本来是在data（）里新注册了一个对象存接口调来的数据，结果如果同时打开几行，那后调的数据就会覆盖前者的数据，会导致所有行的展开行数据都一样。（因为本质上它们绑的是同一个对象）解决方法：把数据分别绑定给每一行，并且由于之前没有detail对象，需要用$set方法给row添加新属性 handleExpand(row) { getDetail(row.id).then(res =》 { this.$set(row, "detail", res.data.data); }); },1234512345坑二：由于调接口是异步的，导致第一次展开的时候还没有相应的数据字段属性，会报undefined错，并且不会展开，但是点第二次之后就没有问题了。在这里插入图片描述解决尝试一：在外面加层v-if判断，不会报错了，但是由于调完接口数据有变化（不确定是不是因为这个，现师父是这么认为，我有点怀疑），它会先打开一下然后立马又关上，还是得点两次。 《el-table-column type="expand" width="1"》 《template slot-scope="scope"》 《div class="expandDIc" style="border-bottom: 1px solid #dddddd" v-if="scope.row.detail"》 《span class="expandSpanHead"》供稿：《/span》 《span class="expandSpan" 》审核通过数 {{scope.row.detail.feedsPictureAuditz?scope.row.detail.feedsPictureAuditz:0|formatnumber}}《/span》 《span class="expandSpan"》审核不通过数：{{scope.row.detail.feedsPictureUnAudit|formatnumber}}《/span》 《span class="expandSpan"》已上架数：{{scope.row.detail.upNum|formatnumber}}《/span》 《span class="expandSpan"》未上架数：{{scope.row.detail.downNum|formatnumber}}《/span》 《span class="expandSpan"》自运营数：{{scope.row.detail.operationNum|formatnumber}}《/span》 《span class="expandSpan"》委托运营数：{{scope.row.detail.entrustedOperationNum|formatnumber}}《/span》 《span class="expandSpan"》标准销售量：{{scope.row.detail.standardNum|formatnumber}}《/span》 《span class="expandSpan"》扩展销售量：{{scope.row.detail.extendNum|formatnumber}}《/span》 《span class="expandSpan"》标准销售额：{{scope.row.detail.standardPrice|formatmoney}}《/span》 《span class="expandSpan"》扩展销售量额：{{scope.row.detail.extendPrice|formatmoney}}《/span》 《/div》 《div class="expandDIc" v-if="scope.row.detail"》 《span class="expandSpanHead"》保护：《/span》 《span class="expandSpan"》审核通过数 {{scope.row.detail.protectAudit|formatnumber}}《/span》 《span class="expandSpan"》审核不通过数 {{scope.row.detail.protectUnAudit|formatnumber}}《/span》 《span class="expandSpan"》公开数 {{scope.row.detail.openNum|formatnumber}}《/span》 《span class="expandSpan"》私密数 {{scope.row.detail.privateNum|formatnumber}}《/span》 《/div》 《/template》 《/el-table-column》12345678910111213141516171819202122232425261234567891011121314151617181920212223242526解决：toggleRowExpansion回调无意间看到toggleRowExpansion的用法，灵机一动，可以用这个自己控制expand的展开，那我不就可以提前调接口再展开了吗。这样需要取到每一行的展开状态。正好ui给的展开icon不是element自带的，那干脆自己写一列按钮来控制好了。 《el-table :data="data" :row-key="getRowKeys" class="eltable" :expand-row-keys="expandArr" ref="table" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" 》 //自己写的按钮列 《el-table-column label align="right" width="50"》 《template slot-scope="scope"》 //展开的图标 《i v-if="!scope.row.expand" class="iconfont icon-gonggongtubiao_kuozhan" @click="handleExpand(scope.row)" 》《/i》 //关闭的图标 《i v-else class="iconfont icon-gonggongtubiao_suoxiao" @click="handleExpand(scope.row)"》《/i》 《/template》 《/el-table-column》 //展开的插槽 《el-table-column type="expand" width="1"》 《template slot-scope="scope"》 《div class="expandDIc" style="border-bottom: 1px solid #dddddd"》 展开区域展开区域展开区域 《/div》 《/template》 《/el-table-column》 《/el-table》123456789101112131415161718192021222324252627282930313233123456789101112131415161718192021222324252627282930313233onload(){this.expandArr = ;//加载时关掉所有展开行 getList(params).then(res =》 { this.total = res.data.data.total; this.data = res.data.data.records; this.data.forEach(el =》 (el.expand = 0)); //获得表格数据的时候直接每行加个expand属性来监控行的展开与否 this.loading = false; }); }, handleExpand(row) { if (row.expand == 0) { row.expand = 1; getDetail(row.id).then(res =》 { this.$set(row, "detail", res.data.data); this.$refs.table.toggleRowExpansion(row, true); }); } else { row.expand = 0; this.$refs.table.toggleRowExpansion(row, false); } }, getRowKeys(row) { return row.id; },1234567891011121314151617181920212223242512345678910111213141516171819202122232425//把element原生样式隐藏掉.el-table__expand-icon{ display: none;}12341234完美解决
实现element-ui中table点击一行展开
toggleRowExpansion() // 参数1是单击行的row，参数2是true 或者false
vue element table expand 扩展行点击行展示且保证只展示一行
背景：因为element里面的扩展行支持多行展示扩展行，但接到了需求，只能展示一行，如：第一行扩展，点击第二行的时候，第一行收起，第二行展开。同时改成点击行展示扩展内容 《el-table :data="eventTableData" style="width: 100%" @cell-click="clickTable" ref="refTable" @selection-change="handleSelectionChange" @expand-change="expandSelect" 》 《el-table-column type="expand" width="0px" label="扩展"》 《/el-table-column》 《/el-table》 data:{ eventTableData:, expands:, } methods:{ clickTable:function(row, column, cell, event){//展开事件日志列表 if(cell.cellIndex!=3 && cell.cellIndex!=10){ this. refs.refTable.toggleRowExpansion(expandedRows); } else { that.expands = ; } }, }***隐藏网址***
