Vue+element deletes a row? - Codes Helper - Programming Question Answer

Vue+element deletes a row?

<template>
    <div class="borrowRules">
      <div class="tableCon" ref="tableDataRef">
           <table-form
                v-loading.body="isLoadingTableData"
                :selectionIsChear="isChecked"
                :colData="colData"
                :data="tableData"
                :row-key="rowkey"
                :max-height="height"
                :submiting="submiting"
                :isShowOper="isShowOper"
                border
                :stripe="true"
                :sortable="sortable"
                @selection-change="handleSelectChange"
                @clear-selection="handleClearSelection"
                :row-class-name="tableRowClassName"
            >
            <el-table-column
              v-if="reserveSelection"
              :reverse-selection="reserveSelection"
              type="selection"
              width="35"
            >
            </el-table-column>
            <el-table-column
             v-for="item in colData"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align"
            :sortable="item.sortable || sortable"
            >
            </el-table-column>
            <el-table-column slot="fixedColumn" label="" fixed="right" width="330" align="center">
              <el-button type="primary" size="mini" :loading="submiting" @click="handleDelete(scope, scope.$index)"></el-button>
                        </div>

                        <div slot="reference">
                            <el-button
                            size="mini"
                            type="danger"
                            plain
                            @click.stop.prevent="scope.row.visible = true">
                            
                            </el-button>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            </table-form>
            
        </div>

        <!--  -->
        <el-dialog title=""
          :visible.sync="deleteRuleDialog"
          top="10%"
          width="400px">
           <span></span>
           <span slot="footer" class="dialog-footer">
                <el-button @click="deleteRuleDialog = false"> </el-button>
                <el-button type="primary" @click="sureRuleDelete"> </el-button>
           </span>
        </el-dialog>
    </div>

</template>
<script>
import BreadCrumb from "@/components/common/BreadCrumb"
import TableForm from "@/components/common/Table"
export default {
    name: "borrowRlue",
    components: {
        BreadCrumb,
        TableForm
    },
    data () {
        return {
            colData: [],
            tableData: [],
            selectionData: [],
            reserveSelection: true,
            sortable: true,
            rowkey: "ruleid",
            submiting: false,
            isShowOper: false,
            visible: false,
            deleteRuleDialog: false,
            rowisible: false
        }
    },
    
    methods: {
        //
        handleDelete (scope, index) {
            scope.visible = false
            console.log(111)
            console.log(scope.index)
            this.tableData.splice(scope.index, 1)
        }
       
}
</script>

Click to delete the fourth line, but the fourth line is not deleted. The result is as follows:

what"s wrong

` <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small"> </el-button> methods: { deleteRow(index, rows) { rows.splice(index, 1); } },