elementui table 写了一个简单的组件，发现重新加载数据并没有刷新数据

组件代码

<template>
    <div class="more-box" :class="{'open':isOpen}" :style="{'max-height':maxHeight+'px'}">
        <slot></slot>
        <el-link type="primary" @click="open()" class="btn-more">&gt;&gt;&gt;</el-link>
    </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
/**
 * 文本更多组件，超出后显示更多
 */
// @ts-ignore
export default class ComUiMore extends Vue {
    /**
     * 是否展开
     */
    private isOpen: boolean = false;

    @Prop({
        default: 100
    })
    private maxHeight: number;

    open() {
        this.isOpen = true;
    }
    mounted() {
        if (this.$el.clientHeight >= this.$el.scrollHeight) {
            this.isOpen = true;
            console.log(this.$el.innerText);
        }
    }
}
</script>

使用代码

<el-table ......>
    ......
    <el-table-column ...> 
        <template slot-scope="scope">
            <more :max-height="69">
                {{scope.row.experience}}
            </more>
        </template>
    </el-table-column>
</el-table>

很神奇的发现，翻页刷新数据并没有改变组件里面的值

尝试在mounted打印，发现确实少了很多的内容，最后确定，组件没有被正常的刷新

想道v-for指令经常和v-key指令配合使用，到这里意见有一点点的想法了，他被复用了，所以去API文档查阅

vue在渲染的时候，拿过来复用了，按照文档给的答案，只需要加上key

 :key="scope.row.id"

文档地址

<el-table ......>
    ......
    <el-table-column ...> 
        <template slot-scope="scope">
            <more :max-height="69" :key="scope.row.id">
                {{scope.row.experience}}
            </more>
        </template>
    </el-table-column>
</el-table>