我的
tableList
和selected都是两层结构，为什么checkSelectedTree这个方法里，走到了if (props.isTree)了，但是为什么
子节点没有
选中，
父节点是半选状态<template>
<div>
<el
-dialog
:close
-on
-click
-modal="false"
:close
-on
-press
-escape="false"
@close="handleCancel"
v
-model="dialogVisible">
<template #header>
<span>添加国家/地区 </span>
</template>
<div class="container">
<div class="search
-row">
<el
-input
v
-model="keyword"
@keydown.enter="handleSearch"
clearable
placeholder="请输入国家/地区"></el
-input>
<el
-button
type="primary"
style="margin
-left: 10px"
@click="handleSearch"
>搜索</el
-button
>
<el
-button @click="handleReset">重置</el
-button>
</div>
<
vxe-table
max
-height="400px"
round
v
-loading="isLoading"
ref="
tableRef"
:data="
tableList"
:checkbox
-config="{ reserve: true, checkStrictly: false }"
@checkbox
-change="selectChangeEvent"
v
-bind="
tableConfig">
<
vxe-column type="checkbox" title="国家/地区" :tree
-node="isTree">
<template #default="{ row }">
{{ row.name }}{{ row.cn_name ? '/' + row.cn_name : '' }}
</template>
</
vxe-column>
</
vxe-table>
</div>
<template #footer>
<el
-button @click="handleCancel">
取消</el
-button>
<el
-button type="primary" @click="handleSuccess">保存</el
-button>
</template>
</el
-dialog>
</div>
</template>
<script setup lang="tsx">
import {
ref,
defineProps,
defineEmits,
onMounted,
watch,
computed,
nextTick
} from 'vue'
import { listCountry } from '@/pc/src/api/logistics'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
selected: {
type: Array as any,
default: () => []
},
selectedBy: {
type: String,
default: 'id'
},
isTree: {
type: Boolean,
default: false
}
})
const
tableConfig = computed(() => {
if (props.isTree) {
return {
'tree
-config': {
rowField: 'id',
parentField: 'pid'
}
}
}
return {}
})
const isLoading = ref(false)
const
tableList = ref<any[]>([])
const
tableRef = ref()
// 根据props.selected传进来的树结构递归
勾选
const checkSelectedTree = (selectedTree: any[]) => {
const $
table =
tableRef.value
if (!$
table) return
selectedTree.forEach((selNode) => {
// 如果有
子节点，递归
勾选
if (selNode.children?.length) {
checkSelectedTree(selNode.children)
return
}
//
勾选当前节点
let row
if (props.isTree) {
const parentIndex =
tableList.value.findIndex((t) => t.id === selNode.pid)
row =
tableList.value[parentIndex]?.children?.find((t) => t.id === selNode.area_id)
console.log(row)
} else {
row =
tableList.value.find((t) => t.value === selNode.value)
}
if (row) {
$
table.setCheckboxRow(row, true)
}
})
}
// 初始化默认
勾选
const initDefaultSelection = async () => {
if (!props.selected?.length) return
checkSelectedTree(props.selected)
}
const getCountry = async () => {
isLoading.value = true
const res = await listCountry({})
if (res.code === 200 && res.data) {
tableList.value = res.data
await nextTick()
initDefaultSelection() // 数据重新加载后
勾选
}
isLoading.value = false
}
// 搜索
const keyword = ref('')
const handleSearch = async () => {
const res = await listCountry({ name: keyword.value })
if (res.code === 200 && res.data) {
tableList.value = res.data
await nextTick()
initDefaultSelection()
}
}
console.log(props.selected)
const selectChangeEvent = ({ checked, row }) => {
console.log(checked, row)
//
选中
if (checked) {
// 如果是一级，全部
选中下级
if (+row.pid === 0) {
selectedObj.value[row.id] = row
} else {
// 获取是否之前有
选中过的children
const pValChildren = selectedObj.value[row.pid]?.children || []
// 获取
父节点数据
const pJson =
tableList.value.find((t) => t.id === row.pid)
// 组装新数据
selectedObj.value[row.pid] = {
...pJson,
children: [...pValChildren, row]
}
}
} else {
//
取消选中
// 如果是一级，全部
取消选中下级
if (+row.pid === 0) {
delete selectedObj.value[row.id]
} else {
const pValChildren = selectedObj.value[row.pid]?.children || []
const newPVal = pValChildren.filter((t) => t.id !== row.id)
if (!newPVal.length) {
delete selectedObj.value[row.pid]
} else {
selectedObj.value[row.pid].children = newPVal
}
}
}
// records.value = $
table.getCheckboxRecords()
}
// 删除已选国家
const handleDelete = (target) => {
// selectList.value = selectList.value.filter((item) => item.id !== target.id)
}
// 弹出框的显示与隐藏
const dialogVisible = ref<boolean>(props.visible)
watch(
() => dialogVisible.value,
(val) => {
emits('update:visible', val)
}
)
const emits = defineEmits([
'update:visible',
'updateSelectCountryDialog',
'updateCountryData'
])
// const selectList = ref<any[]>([])
const selectedObj = ref<any>({})
// 重置
const handleReset = () => {
keyword.value = ''
getCountry()
}
const handleCancel = () => {
dialogVisible.value = false
emits('updateSelectCountryDialog', false)
}
const handleSuccess = () => {
// emits('updateCountryData', selectList.value)
console.log(selectedObj.value)
emits('updateCountryData', selectedObj.value)
handleCancel()
}
onMounted(() => {
getCountry()
})
</script>
文章介绍了在使用vxe-table时遇到的树形表格父节点和子节点复选框不联动的问题。通过设置`checkField`属性并确保行数据包含该字段，可以实现父节点选中或取消时子节点的同步状态。数据结构需包含id和parentId来定义层级关系，而vxe-table的配置包括children、expandAll、reserve等选项。解决方法简单有效，适用于处理类似问题。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
