has been solved. The code after modification is as follows:

<template>
    <el-table
            :data="tableData5"
            style="width: 100%"
            row-key="id"
            :expand-row-keys="expandKeys"
            @expand-change="expandChange">
        <el-table-column label=" ID"prop="id"></el-table-column>
        <el-table-column label="" prop="name"></el-table-column>
        <el-table-column label="" prop="desc"></el-table-column>
        <el-table-column type="expand">
            <template >
                <el-table v-loading="loading" :data="subTableData">
                    <el-table-column label="" prop="shop"></el-table-column>
                    <el-table-column label=" ID" prop="shopId"></el-table-column>
                    <el-table-column label="" prop="category"></el-table-column>
                    <el-table-column label="" prop="address"></el-table-column>
                </el-table>
            </template>
        </el-table-column>
    </el-table>
</template>


<script>
    import axios from "axios"
    var Mock = require('mockjs');

    Mock.mock('/subtable/data',[{
        category: '',
        address: '',
        shop: '',
        shopId: '10333'
    }
    ])

    export default {
        data() {
            return {
                expandKeys:[],/**  **/
                loading:true,
                subTableData:[],
                tableData5: [{
                    id: '12987122',
                    name: '',
                    desc: '',
                }, {
                    id: '12987123',
                    name: '',
                    desc: '',
                }, {
                    id: '12987125',
                    name: '',
                    desc: '',
                }]
            }
        },
        methods: {
            expandChange(row, expandedRows) {
                if(this.expandKeys.indexOf(row.id)>=0){
                    //
                    this.expandKeys.shift()
                    return;
                }
                let _this = this
                //
                _this.loading = true
                _this.subTableData = []
                //
                axios.get('/subtable/data')
                    .then(function (res) {
                        _this.subTableData = res.data
                        _this.loading = false
                        _this.expandKeys.shift()            /**  **/
                        _this.expandKeys.push(row.id)       /**  **/
                    }).catch(function (error) {
                    console.log(error);
                });
                if (expandedRows.length > 1) {
                    //
                    expandedRows.shift()
                }
            }
        }
    }
</script>

is to obtain the data first and then expand it. In this way, there is a response on the page, but the loading effect of the subject image seems to be gone. Another method is to add a default sort in the expanded table. There is a response on the page, for example: default-sort= "{prop: 'id', order:' ascending'}"

this problem should be that the page did not detect a change in the data when manipulating the array data. No refresh. Display the declaration with $set (). You can refresh the page