v-model="value"
multiple
placeholder="请选择"
:popper-append-to-body="false"
@remove-tag="removetag"
collapse-tags
@clear="clearall"
clearable
size="default"
>
//模糊查询搜索框
:prefix-icon="Search" v-model="treeFilter" size="mini" clearable style="width:100%" >
:data="list"
ref="tree"
show-checkbox
node-key="id"
:props="defaultProps"
@check-change="handleNodeClick"
:filter-node-method="filterNode"
/>
import { reactive, ref, nextTick,watch, onMounted } from 'vue';
import { Search} from '@element-plus/icons-vue'
import { axios } from "@src/assets/core";
/**选择器显示
const value = ref([]);
/**实际选择的值
const selectTree = ref([]);
const defaultProps = ref({ children: "children", label: "label" });
const list = ref([
{
id: 3,
label: "二级 2-1",
children: [
{
id: 4,
label: "三级 3-1-1"
},
{
id: 5,
label: "三级 3-1-2"
},
]
},
{
id: 2,
label: "二级 2-2",
children: [
{
id: 6,
label: "四级 3-2-1"
},
{
id: 7,
label: "四级 3-2-2"
},
{
id: 8,
label: "五级 3-2-3"
}
]
},
{
id: 40,
label: "二级 2-4",
},
{
id: 50,
label: "二级 2-5",
},
{
id: 60,
label: "二级 2-6",
},
{
id: 70,
label: "二级 2-7",
},
]);
const tree = ref();
/**
* 选中全部节点
*
*/
function clickAll(){
if(props.clickDepart.length<=0){
value.value = departList.value.map(item=>{
return item.label
})
selectTree.value = departList.value.map(item=>{
return item.id
})
tree.value.setCheckedKeys(selectTree.value, false)
}
else{
for(let i of props.clickDepart){
for(let j of departList.value){
if(j.id == i){
value.value.push(j.label)
selectTree.value.push(j.id)
}
}
}
tree.value.setCheckedKeys(selectTree.value, false)
}
putClickDepart()
}
/**
* 点击选择框选择
*
*/
function handleNodeClick(data, self, child) {
let dataList=[]
dataList[0]=data
if(self == true){
dataList.forEach(item => {
if(item.children){
for(let i of item.children){
if(selectTree.value.indexOf(i.id)<0){
selectTree.value.push(i.id);
value.value.push(i.label);
}
}
}
if(!item.children){
if(selectTree.value.indexOf(item.id)<0){
selectTree.value.push(item.id);
value.value.push(item.label);
}
}
});
}
if(self == false && child == false){
if(!dataList[0].children){
if(selectTree.value.indexOf(dataList[0].id)>=0){
value.value.splice(value.value.indexOf(dataList[0].label),1)
selectTree.value.splice(selectTree.value.indexOf(dataList[0].id),1)
}
}
else{
for(let i of dataList[0].children){
if(selectTree.value.indexOf(i.id)>=0){
value.value.splice(value.value.indexOf(i.label),1)
selectTree.value.splice(selectTree.value.indexOf(i.id),1)
}
}
}
}
}
/**
*
* 清除所有选择
*
*/
function clearall() {
selectTree.value = [];
value.value = [];
nextTick(() => {
tree.value.setCheckedNodes([]);
});
}
/**
*
* 监听模糊搜索
*/
watch(treeFilter, (val) => {
tree.value.filter(val)
})
function filterNode(value,data) {
if (!value) return true
return data.label.includes(value)
}
.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}