表格展开行使用v-loading加载状态问题？

Question

表格展开行内在再嵌套一个表格，子表格使用v-loading绑定了一个加载状态，理想结果是外表格点击一行展开子表格，子表格v-loading=true遮罩一层加载状态，异步请求数据完成后对v-loading绑定的状态取反，关闭遮罩并加载数据。

<el-table :data="tableData" @expand-change="expandCallback" :default-sort="{ prop: 'absence', order: 'descending' }"
            size="large" :border="false" v-loading="loading" class="table">
            <el-table-column type="expand" label="详情" width="60">
                <template #default="props">
                    <el-table :data="props.row.sub" v-loading="props.row.subLoading">
                        <el-table-column align="center" label="员工姓名"></el-table-column>
                        <el-table-column align="center" label="员工姓名"></el-table-column>
                        <el-table-column align="center" label="员工姓名"></el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="staffId" label="工号" width="150" align="center"></el-table-column>
            <el-table-column prop="staffName" width="150" align="center" label="员工姓名"></el-table-column>
            <el-table-column prop="departmentName" width="150" align="center" label="部门"></el-table-column>
            <el-table-column prop="signIn" sortable min-width="100" align="center" label="正常天数"></el-table-column>
            <el-table-column prop="late" align="center" min-width="100" label="迟到天数"></el-table-column>
            <el-table-column prop="leaveEarly" align="center" min-width="100" label="早退天数"></el-table-column>
            <el-table-column prop="absence" sortable align="center" min-width="100" label="缺勤天数"></el-table-column>
        </el-table>

关键是只要一改变任意行的子表格的v-loading绑定的值就会导致2个问题：
(1)加载状态一切换就会导致事先排序好的表格重排（表格刷新了？）
(2)所有展开的行都被关闭

interface expandSet {
    id: number;
    staffName: string;
    staffId: string;
    attendanceTime: string;
    attendanceState: number;
}

interface TableItem {
    staffId: string;
    staffName: string;
    departmentName: string;
    departmentId: number;
    signIn: number;
    late: number;
    leaveEarly: number;
    absence: number;
    subLoading: boolean;//v-loading双向绑定值
    sub: expandSet[];
}
//展开行回调
function expandCallback(row: any, expandedRows: any) {
    setTimeout(() => {
        row.subLoading = false;
    }, 5000);
}

// onMounted会调用该方法
const getData = (startTime: string = query.queryTime[0], endTime: string = query.queryTime[1], departmentId: number = null, staffName: string = null) => {
    findAttendanceToTime(startTime, endTime, departmentId, staffName).then((res) => {
        if (res.data.code === 1000) {
            tableData.value = res.data.data;
            tableData.value.forEach(item => {
                item.sub = [];
                item.subLoading = true; //这里对subLoading初始化
            });
            loading.value = false;
        } else {
            loading.value = false;
            ElMessage.warning(permiss.getError(res));
        }
    }).catch((err) => {
        loading.value = false;
        ElMessage.error(permiss.getError(err));
    })
};

Answer 1

问题解决了，原因如果表格数据（见内容tableData）是用赋值的方式添加，排序会失效，可能是同步异步问题，建议使用push添加数据，第二个展开行问题，最好先将展开行内容添加好，用个空的占位数据也行。