Does the el-table in element-ui keep increasing when switching data with scroll bars in the grid layout?

I encountered this problem in the project today. It was quite a blast. I didn’t see any problems after looking at it for a long time. It’s against the sky. Let’s record it.

Let's use the code scenario to reproduce it: el-tableit is under the grid layout, not a sub-level, and there is a layer of content elements in the middle

<template>
    <div class="kaimo-table">
        <div class="content">
            <el-button type="primary" size="default" @click="handleToggle">切换数据</el-button>
            <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" height="300px">
                <el-table-column prop="date" label="日期" width="120"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
      
      
    name: "TableDemo",
    data() {
      
      
        return {
      
      
            tableData: [],
            tableData2: [
                {
      
      
                    id: "1",
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
      
      
                    id: "2",
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
      
      
                    id: "3",
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
      
      
                    id: "4",
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
      
      
                    id: "5",
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
      
      
                    id: "6",
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                }
            ]
        };
    },
    methods: {
      
      
        handleToggle() {
      
      
            this.tableData = this.tableData.length ? [] : this.tableData2;
        }
    }
};
</script>

<style lang="scss" scoped>
.kaimo-table {
      
      
    display: grid;
    padding: 20px;
    background-color: #eee;
    .content {
      
      
        padding: 20px;
        background-color: #fff;
    }
}
</style>

Then switch the button, the data will change, a scroll bar will be generated, and the width of the table will continue to increase

The solution is to add the following line of code to the grid layout layer to define the column width of each column (really laughing), since there is only one column here, it can be directly written as the following

.kaimo-table {
    
    
    display: grid;
    grid-template-columns: 100%;
    padding: 20px;
    background-color: #eee;
    .content {
    
    
        padding: 20px;
        background-color: #fff;
    }
}