为什么我控制台打印多选框选中的数据为空，朋友们能解答一下吗
<template>
<div class="shopList">
<el-card class="box-card">
<div slot="header" class="title">
<div>订单结算</div>
</div>
<div class="selection">
<el-form :model="queryFrom" ref="resetPwdFormRef" label-width="110px" class="demo-ruleForm">
<el-row>
<el-col :xs="20" :sm="12" :md="12" :lg="7" :xl="7">
<el-form-item label="订单编号：">
<el-input v-model="queryFrom.orderNumber" placeholder="请输入订单编号"></el-input>
</el-form-item>
</el-col>
<el-col :xs="20" :sm="12" :md="12" :lg="7" :xl="7">
<el-form-item label="子订单编号：">
<el-input v-model="queryFrom.subOrderNumber" placeholder="请输入子订单编号"></el-input>
</el-form-item>
</el-col>
<el-col :xs="20" :sm="12" :md="4" :lg="4" :xl="6">
<el-button @click="queryClick()" type="primary" style="width: 82px;margin-left: 10px;">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="contentBox">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="未结算" name="0"></el-tab-pane>
<el-tab-pane label="已结算" name="1"></el-tab-pane>
</el-tabs>
<el-table ref="multipleTable" :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.settleLog" style="width: 100%;margin-left:20px">
<el-table-column type="selection" width="25px"></el-table-column>
<el-table-column v-for="(value, id, index) in sonColumns" :label="value.name" :prop="value.propName"
:key="index">
</el-table-column>
<el-table-column prop="userType" align="center" width="80px" label="用户类型">
<template slot-scope="scope">
<span style="color:#006DFF">
{{zoneType[scope.row.userType]||scope.row.userType}}
</span>
</template>
</el-table-column>
<el-table-column prop="remark" align="center" width="80px" label="说明"></el-table-column>
<el-table-column label="操作" v-if="activeName==0">
<template slot-scope="scope">
<el-button type="primary" @click="submitFun(1,scope.row)">结算</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column ref="one" type="selection" width="25px" @selection-change="handleSelectionChange">
</el-table-column>
<el-table-column v-for="(value, key, index) in parentsCloums" :label="value.name" :prop="value.propName"
:key="index">
</el-table-column>
<el-table-column label="操作" v-if="activeName==0">
<template slot-scope="scope">
<el-button type="danger" @click="submitFun(2,scope.row)">结算</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footerBox"
style="padding:0px; color: #4D4D4D; display: flex;justify-content: space-evenly; align-items: center;">
<div>
<el-button @click="submitFun(3)" style="width:auto">批量通过</el-button>
</div>
<pagesView @currentChange="currentChange" @handleSizeChange="handleSizeChange" :pageSize="queryFrom.pageSize"
:total="total" style="width:80%" />
</div>
</el-card>
</div>
</template>
<script>
import PagesView from '@/component/pagesView.vue'
import {
getSettlementOrder,
settlementDeposit
// addZoneTypeConf,
// upZoneTypeConf,
// delZoneTypeConf
} from '@/api/order/index'
export default {
name: "settlementOrder",
components: {
PagesView
},
data() {
return {
total: 0,
tabHeight: 650,
activeName: '0',
isShow: '',
checked: false, //是否选中
parent: null,
selectionItemAll: [], //全选数据
queryFrom: {
pageNo: 1,
pageSize: 10,
orderNumber: '', //订单编号
subOrderNumber: '', //子订单编号
isDeposit: '0', //0-未入账 1-已入账
},
zoneType: {
'1': '分销商',
'2': '供应商',
'3': '合伙人',
'4': '分公司',
},
parentsCloums: [ //外层table的表头
{
name: "主订单号",
id: "2",
propName: "orderNumber",
}, {
name: "结算ID",
id: "3",
propName: "settleId",
}, {
name: "购买量",
id: "4",
propName: "buyAmount",
}, {
name: "商品价格",
id: "5",
propName: "price",
}, {
name: "修改时间",
id: "6",
propName: "modifytime",
}, {
name: "结算时间",
id: "7",
propName: "addtime",
}
],
tableData: [ //外层table的数据
],
sonColumns: [ //内层table的表头
{
name: "子订单号",
id: "3",
propName: "subOrderNumber",
}, {
name: "结算额",
id: "6",
propName: "amount",
}, {
name: "结算比例",
id: "7",
propName: "percent",
}, {
name: "总价值",
id: "8",
propName: "totalPrice",
}, {
name: "用户ID",
id: "4",
propName: "userId",
}, {
name: "商家名称",
id: "5",
propName: "merchantName",
}, {
name: "修改时间",
id: "6",
propName: "modifytime",
}, {
name: "结算时间",
id: "7",
propName: "addtime",
}
],
};
},
created() {
this.getData()
},
methods: {
getData() {
let params = {
...this.queryFrom
}
params.pageNo = params.pageNo.toString()
params.pageSize = params.pageSize.toString()
getSettlementOrder(params).then(res => {
this.tableData = res.result.data || []
// 在数据更新后执行刷新表格
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
this.$refs.multipleTable.doLayout();
}
})
this.total = res.result.total || 0
this.tabHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 170;
this.tabledata(this.tableData)
})
},
//深拷贝添加属性-checked && parent
tabledata(listdata) {
let areaSegList = JSON.parse(JSON.stringify(listdata))
let redactb = function (list, parent) {
for (let i = 0; i < list.length; i++) {
list[i].checked = false
if (!list[i].parent) {
list[i].parent = parent;
}
if (list[i].settleLog) {
redactb(list[i].settleLog, list[i])
}
}
}
redactb(areaSegList, null);
this.listdatapron = areaSegList
},
//checkbox事件
checkChange(scope) {
console.log(scope)
let settleLogs = scope.row.settleLog
let checkeds = scope.row.checked
//选中子集
if (scope.row.settleLog) {
var redactb = function (list, checked) {
list.checked = checked
for (var i = 0; i < list.length; i++) {
list[i].checked = checked
if (list[i].settleLog) {
redactb(list[i].settleLog, checked)
}
}
}
redactb(settleLogs, checkeds);
}
//取消或选中父级
let changeParent = function (parent, checkeds) {
console.log(checkeds, "1111")
if (parent) {
if (!checkeds) {
parent.checked = false;
} else {
let flag = true;
for (var i = 0; i < parent.settleLog.length; i++) {
if (!parent.settleLog[i].checked) {
flag = false;
break;
}
}
parent.checked = flag;
console.log(flag, "---")
}
changeParent(parent.parent, checkeds);
}
}
changeParent(scope.row.parent, checkeds);
},
// 勾选
handleSelectionChange(val) {
this.selectionItemAll = val
console.log(this.selectionItemAll,'勾选的数据');
},
//确认结算
submitFun(id,row) {
let params = {}
if (id == '1') {
params.settleLogId = row.settleLogId
} else if (id == '2') {
let settleLogIds = []
row.settleLog.forEach(item => {
settleLogIds.push(item.settleLogId)
});
params.settleLogId = settleLogIds.toString()
} else if (id == '3') {
console.log(this.selectionItemAll,'勾选的数据');
if (this.selectionItemAll.length <= 0) return
let settleLogIds = []
let settleLogs = []
this.selectionItemAll.forEach(item => {
settleLogs.push(item.settleLog)
});
settleLogs.forEach(item => {
settleLogIds.push(item.settleLogId)
});
params.settleLogId = settleLogIds.toString()
console.log(settleLogIds,'66');
}
this.$confirm('此操作将为该订单结算入账, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
settlementDeposit(params).then(res => {
this.getData()
this.$message({
type: 'success',
message: '修改成功!'
});
})
}).catch(() => {
this.getData()
this.$message({
type: 'info',
message: '已取消修改！'
});
});
},
//tab切换
handleClick(tab, event) {
this.activeName = tab.name
this.queryFrom.isDeposit = this.activeName
this.getData()
},
//查询
queryClick() {
this.queryFrom.pageNo = 1
this.getData()
},
// 切换页码
currentChange(e) {
this.queryFrom.pageNo = e
this.getData()
},
//页码选择器改变
handleSizeChange(e) {
this.queryFrom.pageSize = e
this.getData()
},
},
};
</script>
