vue2实现 下拉框搜索+多选
【代码】vue2实现 下拉框搜索+多选。
·
<el-form-item label="BName" prop="Name">
<uni-tree-select
ref="treeParamsSingleName"
v-model="dataForm.Name"
multiple
:select-params="selectParamsSingle_"
:tree-params="treeParamsSingleName"
tree-url="/xxx/xxx/list"
:tree-url-params="{ status: 1 }"
@node-click="Check"
@searchFun="_searchFunSingle"
/>
</el-form-item>
treeParamsSingleName: {
filterable: true,
props: {
children: 'children',
label: 'shortName',
value: 'Name',
disabled: 'disabled',
},
},
selectParamsSingle_: {
multiple: true,
clearable: true,
placeholder: '请选择',
},
Check(data) {
console.log('Check', data)
const index = this.dataForm.Name.findIndex(item => item === data.Name)
if (index === -1) {
// 如果不存在,则添加到数组中
this.dataForm.Name.push(data.Name)
}
this.getNameList()
this.invClearValue()
},
getNameList() {
return new Promise((resolve) => {
setTimeout(() => {
this.$http
.get('/xxx/xxx/list' )
.then(({ data: res }) => {
console.log({res});
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.NameList = res.data;
resolve();
})
.catch(() => {})
})
})
},
_searchFunSingle(value) {
this.$refs.treeParamsSingleName.$refs.tree.filter(value)
},
invClearValue() {
this.dataForm.xx = ''
this.dataForm.xx = ''
},
更多推荐
所有评论(0)