记: vue element Cascader 级联选择器 子级全选则传父级, 子级未全选则传子级
在思否一位大佬的评论中学到的, 但是忘记在哪个帖子了…需求:级联选择器中 子级全选则传父级key, 子级未全选则传子级keyelement Cascader 级联选择器 中有一个方法: getCheckedNodes()let CheckedNodes = this.$refs.region.getCheckedNodes()CheckedNodes = CheckedNodes.filter(o
·
在思否一位大佬的评论中学到的, 但是忘记在哪个帖子了…
需求: 级联选择器中 子级全选则传父级key, 子级未全选则传子级key
element Cascader 级联选择器 中有一个方法: getCheckedNodes()
let CheckedNodes = this.$refs.region.getCheckedNodes()
CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.parent.checked))
其中 this.$refs.region 是对应赋予 Cascader 组件的 ref 名
通过 getCheckedNodes() 方法, 可以获取所有已勾选的节点
已知条件: 当父级勾选, 子级必定全选, 子级未全选, 则父级为不勾选状态
那么后面的 filter 方法中过滤条件的是 : !(父级存在 且 父级的勾选状态为true), 取反.
个人理解: 当父级不存在或父级的勾选状态为false时, 保留该节点.
效果图:
当没有全选深圳子级的时候, 就会把子级的值全带上, 如果我现在把坪洲这个选项带上, 那么深圳的半选状态就会变成全选, 同时, 右边的已选框会把子级全去掉, 变成只有深圳一个选项
一直没注意看消息, 现补充上当时的代码 ( 2023.03.16 )
看到大伙需要回显的功能, 不过这一段是好久之前的代码, 也懒得优化了, 当时只为了完成功能, 这次重新写了一个纯HTML的示例. 需要的可以带走, 要是自己优化一下那坨回显的数据就好看多了.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form>
<!-- 地区 城市 -->
<el-form-item class="cities local">
<el-cascader-panel ref="region" size="large" :options="citiesOptions" :props="citiesProps"
v-model="checkedCities" @change="handleCheckedCitiesChange">
</el-cascader-panel>
<div class="citiesRight">
<div class="citiesSelected">
<span>已选</span>
<div type="text" plain class="citiesEmpty" @click="emptyCitiesBtn">清空</div>
</div>
<div class="addCities">
<div class="addCitiesList" v-for="(item, index) in citiesList" :key="index.id">
{{ item.label }}
<i class="el-icon-close" @click="deleteNodeCities(item, index)"></i>
</div>
</div>
</div>
</el-form-item>
<!-- 地区 县 -->
<el-form-item class="cities local">
<el-cascader-panel ref="county" @change="handleCheckedCountyChange" v-model="checkedCounty"
:show-all-levels="false" :options="countyOptions" filterable :props="citiesProps"></el-cascader-panel>
<div class="citiesRight">
<div class="citiesSelected">
<span>已选</span>
<div type="text" plain class="citiesEmpty" @click="emptyCountyBtn">清空</div>
</div>
<div class="addCities">
<div class="addCitiesList" v-for="(item, index) in countyList" :key="index.id">
{{ item.label }}
<i class="el-icon-close" @click="deleteNodeCounty(item, index)"></i>
</div>
</div>
</div>
</el-form-item>
</el-form>
<div>{{ JSON.stringify(district_city_id) }}</div>
<div>
<el-button @Click="eidthuixian">
回显
</el-button>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data() {
return {
isShow: false,
// 地区城市多选
citiesProps: { multiple: true },
citiesOptions: [
{
value: 100,
label: '深圳',
children: [
{ value: 101, label: '宝安' },
{ value: 102, label: '龙华' },
{ value: 103, label: '福田' },
{ value: 104, label: '龙岗' },
{ value: 105, label: '坪洲' }
]
},
{
value: 200,
label: '香港',
children: [
{ value: 201, label: '九龙' },
{ value: 202, label: '沙田' },
{ value: 203, label: '元朗' }
]
},
],
countyOptions: [],
checkedCities: [],
checkedCounty: [],
citiesList: [],
countyList: [],
district_city_id: [
100,
201,
202
]
}
},
methods: {
// 城市地区删除按钮
deleteNodeCities(item, index) {
this.checkedCities = this.checkedCities.filter(option => {
return option.indexOf(item.value) === -1
})
this.citiesList.splice(index, 1)
},
deleteNodeCounty(item, index) {
this.checkedCounty = this.checkedCounty.filter(option => {
return option.indexOf(item.value) === -1
})
this.countyList.splice(index, 1)
},
// 地区县选择
handleCheckedCountyChange() {
let CheckedNodes = this.$refs.county.getCheckedNodes()
CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.parent.checked))
let idArr = []
this.countyList = []
for (let i = 0; i < CheckedNodes.length; i++) {
idArr.push(CheckedNodes[i].value)
this.countyList.push(CheckedNodes[i])
}
this.district_city_id = idArr
},
// 地区城市多选框
handleCheckedCitiesChange() {
let CheckedNodes = this.$refs.region.getCheckedNodes()
console.log(CheckedNodes, '1111')
CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.parent.checked))
let idArr = []
this.citiesList = []
for (let i = 0; i < CheckedNodes.length; i++) {
idArr.push(CheckedNodes[i].value)
this.citiesList.push(CheckedNodes[i])
}
console.log(this.citiesList, 'this.citiesList')
this.district_city_id = idArr
},
// 地区城市清空按钮
emptyCitiesBtn() {
// 城市清空多选框
this.checkedCities = []
// 城市清空添加列表
this.citiesList = []
// 已选城市ids
this.district_city_id = []
},
// 地区县清空按钮
emptyCountyBtn() {
// 县清空多选框
this.checkedCounty = []
// 县清空添加列表
this.countyList = []
// 县清空全选框
// this.checkAll = false
this.ruleForm.district_city_id = []
},
// 地区数据回显处理
getTreeDeepArr(ids, treeData) {
if (ids !== undefined) {
let returnArr = []
for (let i = 0; i < ids.length; i++) {
// 遍历整个数据
for (let j = 0; j < treeData.length; j++) {
// 判断第一层 如果第一层相等
if (treeData[j].value == ids[i]) {
// 判断第二层 如果第二层存在
if (treeData[j].children !== undefined) {
// 则遍历第二层
for (let k = 0; k < treeData[j].children.length; k++) {
// 判断第三层 如果第三层存在
if (treeData[j].children[k].children !== undefined) {
// 遍历第三层
for (let u = 0; u < treeData[j].children[k].children.length; u++) {
// 判断第四层 如果第四层存在
if (treeData[j].children[k].children[u].children !== undefined) {
let temporaryArr = treeData[j].children[k].children[u].children
// 遍历第四层 添加
for (let p = 0; p < temporaryArr.length; p++) {
let newArr = []
newArr[0] = +treeData[j].value
newArr[1] = +treeData[j].children[k].value
newArr[2] = +treeData[j].children[k].children[u].value
newArr[3] = +temporaryArr[p].value
returnArr.push(newArr)
}
} else {
// 如果第四层不存在 则直接添加前三层
let arr6 = []
arr6[0] = +treeData[j].value
arr6[1] = +treeData[j].children[k].value
arr6[2] = +treeData[j].children[k].children[u].value
returnArr.push(arr6)
}
}
} else {
// 如果第三层不存在 则直接添加前两层
let arr = []
arr[0] = +treeData[j].value
arr[1] = +treeData[j].children[k].value
returnArr.push(arr)
}
}
} else {
// 如果第二层不存在 则直接添加第一层
let arr5 = []
arr5[0] = +treeData[j].value
returnArr.push(arr5)
}
} else { // 如果第一层不相等 则判断第二层
// 如果第二层存在
if (treeData[j].children !== undefined) {
// 则遍历第二层
for (let y = 0; y < treeData[j].children.length; y++) {
let arr2 = []
// 判断第二层 如果相等
if (treeData[j].children[y].value == ids[i]) {
// 如果第二层相等 则判断第三层 如果第三层存在
if (treeData[j].children[y].children !== undefined) {
// 遍历第三层 return 出去
for (let g = 0; g < treeData[j].children[y].children.length; g++) {
if (treeData[j].children[y].children[g].children !== undefined) {
for (let d = 0; d < treeData[j].children[y].children[g].children.length; d++) {
let arr3 = []
arr3[0] = +treeData[j].value
arr3[1] = +treeData[j].children[y].value
arr3[2] = +treeData[j].children[y].children[g].value
arr3[3] = +treeData[j].children[y].children[g].children[d].value
returnArr.push(arr3)
}
} else {
let arr11 = []
arr11[0] = +treeData[j].value
arr11[1] = +treeData[j].children[y].value
arr11[2] = +treeData[j].children[y].children[g].value
returnArr.push(arr11)
}
}
} else {
// 如果第二层不相等 则直接 return 出去
let arr4 = []
arr4[0] = +treeData[j].value
arr4[1] = +treeData[j].children[y].value
returnArr.push(arr4)
}
} else { // 如果第二层不想等 则判断第三层
// 如果第三层存在
if (treeData[j].children[y].children !== undefined) {
// 遍历第三层
for (let g = 0; g < treeData[j].children[y].children.length; g++) {
// 如果第三层相等 判断第四层
if (treeData[j].children[y].children[g].value == ids[i]) {
// 如果第四层存在
if (treeData[j].children[y].children[g].children !== undefined) {
// 遍历第四层 return 出去
for (let w = 0; w < treeData[j].children[y].children[g].children.length; w++) {
let arr7 = []
arr7[0] = +treeData[j].value
arr7[1] = +treeData[j].children[y].value
arr7[2] = +treeData[j].children[y].children[g].value
arr7[3] = +treeData[j].children[y].children[g].children[w].value
returnArr.push(arr7)
}
} else { // 如果第四层不存在 判断第三层是否相等
// 如果第三层相等 return 出去
if (treeData[j].children[y].children[g].value == ids[i]) {
let arr3 = []
arr3[0] = +treeData[j].value
arr3[1] = +treeData[j].children[y].value
arr3[2] = +treeData[j].children[y].children[g].value
returnArr.push(arr3)
}
}
} else { // 如果第三层不相等 判断第四层
// 如果第四层存在
if (treeData[j].children[y].children[g].children !== undefined) {
// 遍历第四层
for (let m = 0; m < treeData[j].children[y].children[g].children.length; m++) {
// 如果第四层相等 return 出去
if (treeData[j].children[y].children[g].children[m].value == ids[i]) {
let arr8 = []
arr8[0] = +treeData[j].value
arr8[1] = +treeData[j].children[y].value
arr8[2] = +treeData[j].children[y].children[g].value
arr8[3] = +treeData[j].children[y].children[g].children[m].value
returnArr.push(arr8)
}
}
} else { // 如果第四层不存在 判断第三层
// 如果第三层相等 return 出去
if (treeData[j].children[y].children[g].value == ids[i]) {
let arr9 = []
arr9[0] = +treeData[j].value
arr9[1] = +treeData[j].children[y].value
arr9[2] = +treeData[j].children[y].children[g].value
returnArr.push(arr9)
}
}
}
}
} else { // 如果第三层不存在
// 与第二层相等 直接 return 出去
if (treeData[j].children[y].value == ids[i]) {
let arr10 = []
arr10[0] = +treeData[j].value
arr10[1] = +treeData[j].children[y].value
returnArr.push(arr10)
}
}
}
}
}
}
}
}
return returnArr
}
},
// 地区回显
eidthuixian() {
let timeE = setInterval(() => {
if (this.citiesOptions.length !== 0) {
let ids = this.district_city_id
console.log(ids)
console.log(this.citiesOptions, this.citiesOptions)
this.checkedCities = this.getTreeDeepArr(ids, this.citiesOptions)
console.log(this.checkedCities, 'this.checkedCities')
// setTimeout(() => {
// this.handleCheckedCitiesChange()
// }, 0)
clearInterval(timeE)
}
}, 200)
setTimeout(() => {
clearInterval(timeE)
}, 10000)
let timeR = setInterval(() => {
if (this.countyOptions.length !== 0) {
let ids = this.district_city_id
this.checkedCounty = this.getTreeDeepArr(ids, this.countyOptions)
setTimeout(() => {
this.handleCheckedCountyChange()
}, 0)
clearInterval(timeR)
}
}, 200)
setTimeout(() => {
clearInterval(timeR)
}, 10000)
}
}
})
</script>
</body>
<style>
.cities .el-form-item__content {
display: flex;
padding-left: 120px;
height: 250px;
}
.el-form-item.cities {
margin-bottom: 0;
}
.cities.el-cascader-panel.is-bordered {
width: 56%;
}
.el-cascader-menu {
flex: 1;
height: 100%;
}
.cities.el-checkbox {
width: 10%;
}
.citiesRight {
width: 25%;
border: 1px solid #dee4f5;
border-radius: 8px;
margin-left: 30px;
.citiesSelected {
background: #eee;
padding-left: 20px;
.citiesEmpty {
float: right;
padding-right: 20px;
color: rgb(64, 158, 255);
cursor: pointer;
}
}
.addCities {
padding: 0 20px;
height: 260px;
overflow-x: hidden;
.addCitiesList {
background: #eee;
padding-left: 20px;
border-radius: 8px;
position: relative;
margin-top: 10px;
border: 1px solid rgb(215, 215, 215);
height: 30px;
line-height: 30px;
.el-icon-close {
position: absolute;
right: 10px;
top: 30%;
}
}
}
}
.local .el-cascader-menu__wrap {
margin-bottom: 0;
height: 300px;
width: 100%;
}
.el-form-item.cities .el-form-item__content {
display: flex;
}
</style>
</html>
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)