el-select结合el-tree封装组件
最近需求: 弹框里面放一个下拉框,下拉框内容是一个树状结构。重点:@visible-change下拉框出现/隐藏时触发。或者用el-input和el-tree代替。
·
最近需求: 弹框里面放一个下拉框,下拉框内容是一个树状结构
<el-dialog :visible="visible" :title="title" @open="open" @close="onClose">
<el-form ref="form" :model="form" :rules="rules" label-width="75px">
<el-form-item label="分类" prop="categoryId">
<el-select
ref="selectTree"
v-model="form.categoryId"
placeholder="请选择分类"
filterable
remote
popper-class="category"
:remote-method="remoteMethod"
@visible-change="changeVisible"
>
<el-tree
ref="tree"
v-loading="isLoadingTree"
node-key="id"
default-expand-all
highlight-current
:data="treeData"
:props="extend.defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
/>
<el-option :key="form.categoryId" :value="form.categoryId" :label="categoryName" />
</el-select>
</el-form-item>
private remoteMethod(val) {
this.treeRef.filter(val)
}
private filterNode(value, data) {
if (!value) return true
return data.categoryName.indexOf(value) !== -1
}
private changeVisible(visible) {
if (visible) {
this.treeRef.setCurrentKey(this.form.categoryId)
} else {
this.treeRef.filter('')
}
}
// 点击tree
handleNodeClick(data) {
this.form.categoryId = data.id
this.categoryName = data.categoryName
this.selectTreeRef.blur()
}
重点:@visible-change下拉框出现/隐藏时触发
或者用el-input和el-tree代替
更多推荐
所有评论(0)