sdgpsaf 2021-11-26 11:33 采纳率: 85.7%
浏览 39
已结题

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

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

展开全部

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-11-26 12:41
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 12月31日
  • 已采纳回答 12月24日
  • 创建了问题 11月26日

悬赏问题

  • ¥15 FPGA芯片60进制计数器
  • ¥15 前端js怎么实现word的.doc后缀文件在线预览
  • ¥20 macmin m 4连接iPad
  • ¥15 DBIF_REPO_SQL_ERROR
  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部