<el-cascader
ref="department"
props.multiple = true
:options="departmentList"
popper-class="cascader-department department"
filterable
:show-all-levels="false"
v-model="cascader"
@change="changeDepartment"
@expand-change="cascaderToscroll('department')"
:props="props"
ize="small" placeholder="请选择部门"
class="mr-10 advanSearchselect"
collapse-tags
clearable></el-cascader>
departmentList: [],
props: {
multiple: true,
// checkStrictly: true, // 父子节点取消选中关联,从而达到选择任意一级选项的。
children: 'accountDepResults',
value: 'id',
label: 'departmentName',
emitPath: false
},
获取到数据 并且吧最后一级没数据的删掉
getList() {
getDepartTreeStructure({}).then(res => {
this.getArr(res.data)
})
},
getArr(arr) {
arr.forEach(e => {
if (e.accountDepResults.length) {
this.getArr(e.accountDepResults)
} else {
delete e.accountDepResults
}
})
},
changeDepartment(val) { // 获取到选中的数据
this.departmentIds = val ? val.map(item => item[item.length - 1]) : []
},
cascaderToscroll(el) { x轴方向移动
this.$nextTick(() => {
const domAll = document.querySelectorAll(`.${el}`)
for (const dom of domAll) {
dom.scrollLeft = dom.scrollWidth - (dom.offsetWidth || dom.clientWidth)
}
})
},
el-cascader的使用 以及x轴方向像后移动
最新推荐文章于 2024-07-09 17:33:35 发布