スタイルは次のとおりです。
htmlスタイル
<el-form-item label="覆盖区域" :label-width="formLabelWidth" prop="coverageArea" class="classCover">
<div style="width: 100%;border: solid 1px #DCDFE6;position: relative;height:40px;cursor: pointer;overflow-y: auto" @click='handleControll' v-if="provinceName.length<=0"></div>
<div style="top:-6px;width: 100%;border: solid 1px #DCDFE6;cursor: pointer;overflow-y: auto" id="provinceNameDiv" v-else>
<el-button v-for="item in provinceName" plain type="primary" style="margin-left: 6px" size="mini">{
{item.name}}+{
{item.num}}</el-button>
</div>
<!-- </div>-->
<el-popover placement="bottom-start"
width="600"
v-model="visible" popper-class="max-h-300px overflow-auto">
<el-input placeholder="输入关键字搜索" v-model="filterText" @click.stop.native class="sel" style="width: 70%" clearable id="inputId"></el-input>
<el-checkbox v-model="checked">全国</el-checkbox>
<el-tree :data="CoverageAreaArry" :props="defaultProps" ref="tree" show-checkbox :expand-on-click-node="false" :filter-node-method="filterNode" node-key="id" check-on-click-node @check-change="handleNodeClick" ></el-tree>
<template #reference>
<el-button style="width: 100%;position: absolute;top: 0;height:50px;opacity: 0" id="provinceNameDiv2"></el-button>
</template>
</el-popover>
</el-form-item>CSSスタイル
<style>
.option-style{
padding:0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
/deep/.sel .el-input__inner{
width: 70%;
margin-left: 5%;
}
.el-select-dropdown .el-popper{
width: 70% !important;
transform-origin: center top;
z-index: 2003 ;
position: absolute;
top: 249px !important;
left: 150px !important;
}
.el-tree{
display: block;
}
.el-tree-node__children{
position: relative;
top:30px;
left: -60px;
margin-bottom: 30px;
}
.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}
.select_inpt .el-input input{
opacity: 0;
}
#inputId{
opacity: 1 !important;
}
.el-popover .el-popper{
width: 100%;
}
.el-tree > div {
display: flex;
width: 100%;
}
.classCover .el-form-item__content{
height: auto !important;
}
</style>
<style scoped>
.max-h-300px {
max-height: 300px;
}
.overflow-auto {
overflow: auto;
}
.option-style{
padding:0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
/deep/.sel .el-input__inner{
width: 70%;
margin-left: 5%;
}
</style>アダプティブレイアウトの設定が必要です 選択した都道府県が複数行表示される場合は、
window.resize=function (){
$("#provinceNameDiv").parent().css("height", $("#provinceNameDiv").css("height"))
$("#provinceNameDiv2").css("height", $("#provinceNameDiv").css("height"))
}見る, 聞く
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
checked: {//侦听全国是否被勾选，也需要设置自定义布局，因为要显示所有省份，需要两三行
handler(newValue,oldValue){
// console.log(newValue,oldValue)
if(newValue==true){
this.$refs.tree.setCheckedNodes(this.CoverageAreaArry)
}else{
this.$refs.tree.setCheckedNodes([])
}
$("#provinceNameDiv").parent().css("height", $("#provinceNameDiv").css("height"))
this.$nextTick().then (() => {
$("#provinceNameDiv2").css("height", $("#provinceNameDiv").css("height") ? $("#provinceNameDiv").css("height") : "40px")
})
},
deep: true,
},
provinceName:{//如果不选全国，选较多省份也需要
handler(newValue,oldValue){
// console.log(newValue,oldValue)
$("#provinceNameDiv").parent().css("height", $("#provinceNameDiv").css("height"))
this.$nextTick().then (() => {
$("#provinceNameDiv2").css("height", $("#provinceNameDiv").css("height") ? $("#provinceNameDiv").css("height") : "40px")
})
},
deep: true,
}
},州および地方自治体のデータの取得
/*
* 覆盖区域选择
* */
handleCoverageArea(){
request2('/base/mediationCenterMaintain/queryProvinceAndCity', {}, this.callbackInitDataCoverageArea, 'GET')
},
callbackInitDataCoverageArea(_data){
this.CoverageAreaArry=_data.map(v=>{
v.label=v.bizProvinceDO.codeValueMean
v.id=v.bizProvinceDO.codeValue
v.children=v.bizCityDOS
v.children.map(i=>{
i.label=i.codeValueMean
i.id=i.codeValue
})
return v
})
// console.log(this.CoverageAreaArry)
},フィルタリング、つまり検索関数は、filter-node-method を設定する必要があります。値はフィルタリング関数であり、watch によってリッスンされる入力ボックスの値と組み合わせて使用されます。
/*
* 过滤
* */
filterNode(value, data,node) {
// console.log(value, data)
if (!value) return true;
// 如果传入的value和data中的label相同说明是匹配到了
if (data.label.indexOf(value) !== -1) {
return true;
}
// 否则要去判断它是不是选中节点的子节点
return this.checkBelongToChooseNode(value, data, node);
},
// 判断传入的节点是不是选中节点的子节点
checkBelongToChooseNode(value, data, node) {
console.log(node)
const level = node.level;
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false;
}
// 先取当前节点的父节点
let parentData = node.parent;
// 遍历当前节点的父节点
let index = 0;
while (index < level - 1) {
// 如果匹配到直接返回
if (parentData.data.label.indexOf(value) !== -1) {
return true;
}
// 否则的话再往上一层做匹配
parentData = parentData.parent;
index ++;
}
// 没匹配到返回false
return false;
},ツリー選択のロジックについてはelemenyuiのツリーイベントを参照してください。
handlerCheck(_dataList) {
let _this = this
_this.provinceName = []
// _dataList.forEach(item => {
_this.CoverageAreaArry.forEach(area =>{
// if (item.label == area.label) {
let _num = 0
let _children=[]
let checkedId=[]
if (area.children && area.children.length > 0) {
area.children.forEach(areaChild => {
_dataList.forEach(item => {
if (areaChild.label == item.label) {
_num++
_children.push(item.label)
}
})
})
}else {//香港 澳门 台湾
_dataList.forEach(item => {
if (area.label == item.label) {
_num++
}
})
}
if (_num > 0) {
//省
_this.provinceName.push({
name:area.label,
num: _num,
children: _children,
})
// console.log(_this.provinceName)
}
// }
})
// })
$("#provinceNameDiv").parent().css("height", $("#provinceNameDiv").css("height"))
$("#provinceNameDiv2").css("height", $("#provinceNameDiv").css("height"))
},
handleNodeClick(data,self,child) {
// console.log(this.$refs.tree.getCheckedNodes())
let datalist = this.$refs.tree.getCheckedNodes()
this.selectTree = [] //置空
this.value = []
datalist.forEach((item)=>{
this.selectTree.push({id:item.id,label:item.label})
this.value.push(item.label)
})
this.handlerCheck(datalist)
},