根据ctrlJobHistoryId 和prJobHistoryId 分别合并 单元格

70 阅读2分钟
<el-table
    :data="pageData.tableData"
    ref="singleTableRef"
    :span-method="objectSpanMethod"
    :cell-class-name="tableCellClassName"
    :height="pxToRem(470)"
    @cell-click="tableCellClick"
    border
    style="width: 100%"
>
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="ctrlJobHistoryId"
        label="cj Id"
        min-width="45"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="ctrlJobName"
        label="Control Job"
        min-width="85"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="ctrlJobState"
        label="CJ State"
        min-width="85"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="autoStart"
        label="Auto Run"
        min-width="60"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="jobType"
        label="Job Type"
        min-width="85"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="processOrderMgmt"
        label="PJ Order"
        min-width="55"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="ctrlStartTime"
        label="Start Time"
        min-width="75"
        show-overflow-tooltip
    />
    <el-table-column
        :resizable="false"
        prop="ctrlEndTime"
        class-name="end"
        label="End Time"
        min-width="75"
        show-overflow-tooltip
    />
    <el-table-column
        class-name="pointer"
        :resizable="false"
        prop="prJobHistoryId"
        label="pr Id"
        min-width="45"
        show-overflow-tooltip
    />
    <el-table-column :resizable="false" prop="prJobName" label="Process Job" min-width="85" show-overflow-tooltip />

    <el-table-column :resizable="false" prop="prJobState" label="PJ State" min-width="85" show-overflow-tooltip />
    <el-table-column :resizable="false" prop="recipeName" label="Recipe" min-width="85" show-overflow-tooltip />
    <el-table-column :resizable="false" prop="prStartTime" label="Start Time" min-width="75" show-overflow-tooltip />
    <el-table-column :resizable="false" prop="prEndTime" label="End Time" min-width="75" show-overflow-tooltip />
    <el-table-column :resizable="false" prop="carrierId" label="Carrier Id" min-width="55" show-overflow-tooltip>
        <template #default="scope">
            <div class="carrierId">{{ scope.row.carrierId }}</div>
        </template>
    </el-table-column>
    <el-table-column :resizable="false" prop="lotId" label="Lot Id" min-width="55">
        <template #default="scope">
            <!--                        <div class="carrierId">{{ lotId }}</div>-->
            <el-tooltip placement="top">
                <template #content>
                    <span v-for="item in scope.row.lotId.split(',')">{{ item }}<br /></span>
                </template>
                <div class="lotId jc-ellipsis">{{ scope.row.lotId }}</div>
            </el-tooltip>
        </template>
    </el-table-column>
    <el-table-column :resizable="false" prop="waferCount" label="Wafer Count" min-width="75" show-overflow-tooltip />
</el-table>
// 合并单元格
const ctrlJobNameRowSpan = ref([])
const prJobNameRowSpan = ref([])

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    // if (columnIndex === 0 || columnIndex === 1) {
    // 获取当前单元格的值
    // 先合并cj
    console.log(8886666, column.property)
    if (column.property == 'ctrlJobHistoryId') {
        console.log(888)
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        const preRow = pageData.value.tableData[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : ''
        // 如果当前值和上一行的值相同,则将当前单元格隐藏
        if (currentValue == preValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 否则计算当前单元格应该跨越多少行
            let rowspan = 1
            for (let i = rowIndex + 1; i < pageData.value.tableData.length; i++) {
                const nextRow = pageData.value.tableData[i] // 每行数据
                const nextValue = nextRow[column.property]
                if (nextValue === currentValue) {
                    rowspan++
                } else {
                    break
                }
            }
            ctrlJobNameRowSpan.value[rowIndex] = rowspan
            // ctrlJobNameRowSpan.value.push(rowspan)
            return { rowspan, colspan: 1 }
        }
    }

    //其余的合并项

    if (columnIndex < 7) {
        if (pageData.value.tableList1.includes(column.property)) {
            let rowspan = ctrlJobNameRowSpan.value[rowIndex]
            return { rowspan, colspan: 1 }
        }
    }
    if (column.property == 'prJobHistoryId') {
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        const preRow = pageData.value.tableData[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : ''
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            let rowspan = 1
            for (let i = rowIndex + 1; i < pageData.value.tableData.length; i++) {
                const nextRow = pageData.value.tableData[i] // 每行数据
                const nextValue = nextRow[column.property]
                if (nextValue === currentValue) {
                    rowspan++
                } else {
                    break
                }
            }
            prJobNameRowSpan.value[rowIndex] = rowspan
            rowspan =
                prJobNameRowSpan.value[rowIndex] > ctrlJobNameRowSpan.value[rowIndex]
                    ? ctrlJobNameRowSpan.value[rowIndex]
                    : prJobNameRowSpan.value[rowIndex]
            return { rowspan, colspan: 1 }
        }
    }

    // //其余的合并项

    if (columnIndex >= 7) {
        if (pageData.value.tableList2.includes(column.property)) {
            let rowspan =
                prJobNameRowSpan.value[rowIndex] > ctrlJobNameRowSpan.value[rowIndex]
                    ? ctrlJobNameRowSpan.value[rowIndex]
                    : prJobNameRowSpan.value[rowIndex]
            // let rowspan = prJobNameRowSpan.value[rowIndex]
            return { rowspan, colspan: 1 }
        }
    }
}