vue引入table模板写一个demo,想通过按钮删除选中行,传参过程undefined

想通过点击checkbox触发事件,获得选中的index返回值,然后传给button按钮,获得的值为undefind。
<template>
  <div class="base-demo”
    <vue-table-dynamic
       iparams='params
       @select="onselect
       @cell-change="onCellchange'
       @select-all="onSelectAll
       @row-click="onRowclick'
       @cell-contextmenu="onCellContextmenu
       @sort-change="onSortchange
       @selection-change=”onSelectionChange'
       ref="table
    ></vue-table-dynamic
     <buttonclass="add”@click="addtr">添加一行</button)
     <buttonclass="del”@click="deltr">删除一行</button)
  </div>
</template>
<script>
import VueTableDynamic from "vue-table-dynamic";
import axios from "axios";
export default {
  data() {
    return {
      params: {
        data: [
          ["序号", "项目", "部门", "明细", "", "", "备注"],
          ["1", "", "—", "—", "—", "—", "—"],
          ["1.1", "", "—", "—", "—", "—", "—"],
          ["1.1.1", "", "—", "—", "—", "—", "—"],
          ["1.1.2", "", "—", "—", "—", "—", "—"],
          ["1.2", "", "—", "—", "—", "—", "—"],
          ["1.2.1", "", "—", "—", "—", "—", "—"],
          ["1.2.2", "", "—", "—", "—", "—", "—"],
          ["2", "", "—", "—", "—", "—", "—"],
        ],
        header: "row", //配置行标题
        border: true, //边界
        stripe: true, //条纹
        highlight: { column: [1] }, //强调列
    onSelect(checked, index, data) {
      console.log("选择一行触发事件", checked, index, data);
      console.log(index, typeof index);
      return index;
}
     deltr() {
      var index = this.onSelect();
      console.log(index);
      this.params.data.splice(index, 1);
    },
选中了一行

img

点删除按钮之后,打印index值为undefined,为什么把第一行删了?

img

这样写好像每次只能删除一行,有没有其他的方法,求指点。

undefined应该被当做下标0了,所以删除了第一项
应该给checkbox添加change事件,然后data新增已给indexs:[]数组记录选中的checkbox所在的下标(选中压入indexs数组,未选中则从indexs数组中删除)
执行deltr时应该从indexs获取要删除的数据行下标。注意要将indexs 升序排列下,然后从后面遍历执行删除(降序则从头遍历),要不下标未排序可能会误删数据