vue+element删除一行？

Question

<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>

点击删除第四行却删除的不是第四行，结果如下：

错在哪

Answer 1

你可以先把scope打印出来看看里面是什么

Answer 2

官网 看一下

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

`