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