VUE中删除数据后编号如何自动更新保持连续

Question

从中间删除数据后编号如何自动更新保持连续

子组件

<template>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in stus" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="updUI(item)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props:['stus'],
    methods:{
        del(id){
            this.$emit('del',id)
        },
    }
}
</script>

父组件

data(){
        return{
            stus:[
                {id:1,name:'刘备',age:'18'},
                {id:2,name:'关羽',age:'12'},
                {id:3,name:'张飞',age:'15'},
                {id:4,name:'赵云',age:'29'}
            ],
            id:5,
            }
        }
    },
methods:{
        del(id){
            this.stus=this.stus.filter(item=>item.id!=id)
        },

Answer 1

你是用id显示，那肯定是根据每一项元素的id来的，循环数据序号一般都使用index

<tr v-for="(item, index) in stus" :key="item.id">
                    <td>{{index + 1}}</td>