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

img

img

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

子组件

<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)
        },

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

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

你是说 id 要连续？ 从中间 删除 一个后 下面的 要 连起来？。那序号这一列不如用 index 来显示