<template>
<div class="transfer">
<div class="left">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[]"
:props="defaultProps"
@check="changeHandel"
>
</el-tree>
</div>
<div class="operateBox">
<el-button @click="addFn">添加</el-button><el-button>删除</el-button>
</div>
<div class="right">
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{
city
}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
let cityOptions = [];
export default {
data() {
return {
arr: [],
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "上海",
},
{
id: 5,
label: "北京",
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 6,
label: "广州",
},
{
id: 7,
label: "深圳",
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
// 操作树形结构
changeHandel(val, checkedKeys) {
console.log(checkedKeys.checkedNodes);
let newarr = [];
checkedKeys.checkedNodes.forEach((item) => {
//arr.push(item)
if (!item.children) {
newarr.push(item.label);
}
});
console.log(newarr);
this.arr = newarr;
this.checkedCities = this.arr;
},
// 操作多选框
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
console.log(value);
},
// 操作左框穿梭右框
addFn() {
// cityOptions = this.arr;
// console.log(cityOptions);
// this.checkedCities = this.arr;
this.arr.forEach((item) => {
cityOptions.push(item);
});
},
},
};
</script>
<style lang="scss" scoped>
.transfer {
display: flex;
justify-content: space-between;
width: 700px;
height: 500px;
background-color: green;
.left {
width: 40%;
height: 100%;
background-color: red;
}
.operateBox {
flex: 1;
background-color: #ccc;
display: flex;
flex-direction: column;
.el-button {
margin: 0;
}
}
.right {
width: 40%;
height: 100%;
background-color: blue;
}
}
</style>
史上最菜鸡穿梭框
最新推荐文章于 2024-07-28 20:27:10 发布