|
|
|
@ -145,14 +145,26 @@ |
|
|
|
|
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
|
|
|
|
<el-cascader |
|
|
|
|
ref="range" |
|
|
|
|
key="range" |
|
|
|
|
v-model="range" |
|
|
|
|
:props="props" |
|
|
|
|
:show-all-levels="false" |
|
|
|
|
clearable |
|
|
|
|
filterable |
|
|
|
|
:before-filter="beforeFilter" |
|
|
|
|
@visible-change="rangeViChange" |
|
|
|
|
:options="rangeList" |
|
|
|
|
@change="rangeChange" |
|
|
|
|
@input.native="rangeSearch"></el-cascader> |
|
|
|
|
<div class="range-check"> |
|
|
|
|
<el-tag |
|
|
|
|
v-for="tag in rangeChecked" |
|
|
|
|
:key="tag.value" |
|
|
|
|
closable> |
|
|
|
|
{{tag.label}} |
|
|
|
|
</el-tag> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
|
|
|
@ -208,6 +220,7 @@ export default { |
|
|
|
|
range: [], |
|
|
|
|
rangeInit: [], |
|
|
|
|
rangeName: '', |
|
|
|
|
rangeChecked: [], |
|
|
|
|
// 选择区域懒加载 |
|
|
|
|
props: { |
|
|
|
|
multiple: true, |
|
|
|
@ -366,6 +379,26 @@ export default { |
|
|
|
|
showRange() { |
|
|
|
|
this.rangeVisible = true |
|
|
|
|
}, |
|
|
|
|
rangeViChange(boolean){ |
|
|
|
|
console.log(33, this.$refs.range.$refs.panel) |
|
|
|
|
//true下拉框展开 false下拉框收起 展开时清掉上次搜索结果 恢复如初 |
|
|
|
|
if(boolean){ |
|
|
|
|
this.$refs.range.$refs.panel.activePath=[]; |
|
|
|
|
// this.getCascader("region", null); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
rangeChange(val, e) { |
|
|
|
|
console.log("🚀 ~ file: index.vue ~ line 388 ~ rangeChange ~ val", val, this.$refs.range.getCheckedNodes()) |
|
|
|
|
const checked = this.$refs.range.getCheckedNodes() |
|
|
|
|
const name = [] |
|
|
|
|
checked.map(e => { |
|
|
|
|
name.push({ |
|
|
|
|
value: e.value, |
|
|
|
|
label: e.label |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.rangeChecked = name |
|
|
|
|
}, |
|
|
|
|
// 获取学校列表 |
|
|
|
|
getSchool() { |
|
|
|
|
this.$get(this.api.querySchoolData).then(({ list }) => { |
|
|
|
@ -386,11 +419,14 @@ export default { |
|
|
|
|
}, |
|
|
|
|
// 范围筛选 |
|
|
|
|
rangeSearch(el) { |
|
|
|
|
const val = el.target.value |
|
|
|
|
if (!val) return false |
|
|
|
|
clearTimeout(this.rangeTimer) |
|
|
|
|
this.rangeTimer = setTimeout(() => { |
|
|
|
|
const val = el.target.value |
|
|
|
|
// this.$refs.range.$refs.panel.activePath = [] |
|
|
|
|
let result = this.schools.filter(e => e.label.includes(val)) // 用学校列表做比对 |
|
|
|
|
this.rangeList = val ? result : [] |
|
|
|
|
console.log("🚀 ~ file: index.vue ~ line 428 ~ this.rangeTimer=setTimeout ~ result",this.schools.filter(e => e.label.includes(val)), this.schools) |
|
|
|
|
this.rangeList = result |
|
|
|
|
}, 500) |
|
|
|
|
}, |
|
|
|
|
// 范围确定 |
|
|
|
@ -700,4 +736,10 @@ $upload-lg-height: 150px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.range-check { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
.el-tag { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |