文章目录
效果图
1721384084734
地址:https://live.csdn.net/v/410888?spm=1001.2014.3001.5501
<vxe-grid ref='gridWarehouse' v-bind="gridWarehouseOptions" v-if="tableHeight" :height="tableHeight"
:expand-config="{iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus'}"
@checkbox-change="gridWarehouseCheckboxChangeEvent" @checkbox-all="gridWarehouseCheckboxAllEvent"
@toggle-row-expand="toggleExpandChangeEvent">
//官方写法展开行插槽
<template #deliverDetailList="{ row ,rowIndex }">
//嵌套的table setCheckboxRow无效一定要加上checkbox-config配置:checkField: 'checked'
//checkbox-change:接收回调参数 param 并传递自定义参数 deliverOrderCode
<vxe-table :ref="'tableWarehouse'+ row.deliverOrderCode" border stripe :data="row.recRetDetailVoList"
align="center" style="margin-left: 40px" min-height="80" row-id="id"
:checkbox-config="{ labelField: '', checkField: 'checked', highlight: true, trigger: 'row', reserve: false , range: true}"
@checkbox-change="(param) => tableWarehouseCheckboxChangeEvent(param,row.deliverOrderCode)"
@checkbox-all="(checked) => tableWarehouseCheckboxAllEvent(checked,row.deliverOrderCode)">
<vxe-column type="checkbox" width="40"/>
<vxe-column type="seq" title="#" width="50"/>
<vxe-column field="voucherNum" title="单据号"/>
<vxe-column field="voucherQuantity" title="数量"/>
<vxe-column field="materialCode" title="物料编码"/>
<vxe-column field="materialName" title="物料"/>
<vxe-column field="unitName" title="单位"/>
<vxe-column field="spec" title="规格"/>
<vxe-column field="model" title="型号"/>
</vxe-table>
</template>
</vxe-grid>
//外层grid table的勾选事件
gridWarehouseCheckboxChangeEvent({checked, row}) {
//动态获取里层的table的refs,如果是undefined说明用户没有手动展开
const $tableWarehouse = this.$refs[`tableWarehouse${row.deliverOrderCode}`]
if ($tableWarehouse === undefined) {
this.updateBillData(checked, row.recRetDetailVoList)
} else {
$tableWarehouse.toggleAllCheckboxRow()
}
},
//外层grid table的全选事件
gridWarehouseCheckboxAllEvent({checked, $event}) {
const $gridWarehouse = this.$refs.gridWarehouse
const gridWarehouseTableData = $gridWarehouse.getTableData().tableData
for (let i of gridWarehouseTableData) {
const $tableWarehouse = this.$refs[`tableWarehouse${i.deliverOrderCode}`]
if ($tableWarehouse === undefined) {
this.updateBillData(checked, i.recRetDetailVoList)
} else {
//toggleAllCheckboxRow 用于 type=checkbox,切换所有行的选中状态
$tableWarehouse.toggleAllCheckboxRow()
}
}
},
//里层grid table的勾选事件
tableWarehouseCheckboxChangeEvent(param, deliverOrderCode) {
const $tableWarehouse = this.$refs[`tableWarehouse${deliverOrderCode}`]
//setCheckboxRow 用于 type=checkbox 复选框,设置行为选中状态,第二个参数为选中与否
$tableWarehouse.setCheckboxRow(param.row, param.checked)
if (param.checked) {
const index = this.billData.findIndex(item => item.id === param.row.id)
if (index === -1) {
this.billData.push(param.row)
}
} else {
for (let tt = 0; tt < this.billData.length; tt++) {
if (param.row.id === this.billData[tt].id) {
this.billData.splice(tt, 1)
break;
}
}
}
const $gridWarehouse = this.$refs.gridWarehouse
const rowId = this.getGridWarehouseTableDataRowId($gridWarehouse.getTableData().tableData, param.row.deliverOrderCode)
if ($tableWarehouse.isAllCheckboxChecked()) {
//getRowById 根据行的唯一主键获取行(需要 row-config.keyField)
$gridWarehouse.setCheckboxRow($gridWarehouse.getRowById(rowId), true)
} else {
//getCheckboxRecords 用于 type=checkbox,获取当前已选中的行数据,包含当前列表(如果 isFull=true 包含完整列表)
const selectRecordLength = $tableWarehouse.getCheckboxRecords().length
if (selectRecordLength === 0) {
$gridWarehouse.setCheckboxRow($gridWarehouse.getRowById(rowId), false)
} else if (selectRecordLength < $tableWarehouse.getTableData().tableData.length) {
$gridWarehouse.setCheckboxRow($gridWarehouse.getRowById(rowId), false)
}
}
},
//里层grid table的全选事件
tableWarehouseCheckboxAllEvent(param, deliverOrderCode) {
const $gridWarehouse = this.$refs.gridWarehouse
const $tableWarehouse = this.$refs[`tableWarehouse${deliverOrderCode}`]
const tableWarehouseTableData = $tableWarehouse.getTableData().tableData
const gridWarehouseTableData = $gridWarehouse.getTableData().tableData
let rowId = ''
for (let i of gridWarehouseTableData) {
if (i.deliverOrderCode === tableWarehouseTableData[0].deliverOrderCode) {
rowId = i._X_ROW_KEY
break;
}
}
$gridWarehouse.setCheckboxRow($gridWarehouse.getRowById(rowId), param.checked)
for (let j of tableWarehouseTableData) {
$tableWarehouse.setCheckboxRow($tableWarehouse.getRowById(j.id), param.checked)
}
this.updateBillData(param.checked, tableWarehouseTableData)
},
//根据deliverOrderCode获取$gridWarehouse的rowId,用于定位外层TableData,外层的rowId是默认的
getGridWarehouseTableDataRowId(gridWarehouseTableData, deliverOrderCode) {
let rowId = ''
for (let i of gridWarehouseTableData) {
if (i.deliverOrderCode === deliverOrderCode) {
rowId = i._X_ROW_KEY
break;
}
}
return rowId;
},
//记录用户选取的数据
updateBillData(checked, recRetDetailVoList) {
//checked勾选状态:true | false
if (checked) {
for (let t of recRetDetailVoList) {
const index = this.billData.findIndex(item => item.id === t.id)
if (index === -1) {
this.billData.push(t)
}
}
} else {
for (let t of recRetDetailVoList) {
for (let tt = 0; tt < this.billData.length; tt++) {
if (t.id === this.billData[tt].id) {
this.billData.splice(tt, 1)
break;
}
}
}
}
},
//table插槽展开事件,官方解释:当行展开或收起时会触发该事件
//我这主要是用户先勾选了外层的table行,那么用户在展开时,初始化勾选状态
toggleExpandChangeEvent({$rowIndex, column, columnIndex, $columnIndex, $event}) {
this.$nextTick(() => {
for (let i of this.billData) {
const $tableWarehouse = this.$refs[`tableWarehouse${i.deliverOrderCode}`]
if ($tableWarehouse !== undefined) {
const index = $tableWarehouse.getTableData().tableData.findIndex(item => item.id === i.id)
if (index !== -1) {
$tableWarehouse.setCheckboxRow($tableWarehouse.getRowById(i.id), true)
}
}
}
})
}
PS:
目前存在bug
1.用户展开了嵌套的table,再勾选外层table的行,全setCheckboxRow为true,但是嵌套的table表头的全选框不会有勾选样式。
2.用户不展开嵌套的table,勾选外层table的行,再展开嵌套的table,此时表头全选框会是勾选状态,但是用户再次点击外层table的行去取消勾选时,嵌套table表头的全选框还是勾选状态。