el-table嵌套 合同操作项内容

<el-table :data="data.tableData" v-loading="loading" :header-cell- 
  style="table_header_style" :cell-style="table_style" stripe class="parentTable" 
  style="width: 100%; margin-top:15px;min-height: 54vh;" :scrollbar-always-on="true" 
  :default-expand-all="true" highlight-current-row height="60vh">
  <el-table-column type="expand">
   <template #default="scope">
    <el-table :data="scope.row.services" :header-cell-style="table_header_style" :cell-    
    style="table_style" style="width: 100%; margin-top:15px ;":show-header="false" 
    class="childTable" :span-method="spanMethod">


    </el-table>
   </template>
  </el-table-column>
 </el-table>


async function getlist() {
    loading.value = true
    let _data = {
        pageSize: page.pageSize,
        pageNum: page.pageNum,
        ...searchData
    }
    let res = await getOrderList(_data)
    if (res.code == 0) {
        let detailsList = []
        data.tableData = res.result.list
        data.tableData.forEach(o => {
            o.services.forEach(child => {
                detailsList.push(child)
            });
        });
        getSpanData(detailsList)
        page.total = res.total
        loading.value = false
    }
}
function getSpanData(_data) {
    // 存放计算好的合并单元格的规则
    data.spanData = []
    for (var i = 0, len = _data.length; i < len; i++) {
        if (i === 0) {
            data.spanData.push(1)
            data.pos = 0
        } else { // 判断当前元素与上一个元素是否相同
            if (_data[i].contractId === _data[i - 1].contractId) {
                data.spanData[data.pos] += 1
                data.spanData.push(0)
            } else {
                data.spanData.push(1)
                data.pos = i
            }
        }
    }
}

function spanMethod({ row, column, rowIndex, columnIndex }) {
    let _row = null
    let _col = null
    if (column.label === '操作') {
        _row = data.spanData[rowIndex]
        _col = _row > 0 ? 1 : 0
        return {
            rowspan: _row,
            colspan: _col
        }
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值