<el-form-item
v-show="isAddUser === true"
label="可分销用户"
prop="leveltest"
>
<el-select
ref="select"
v-model="dialogForm.selectedList"
collapse-tags
:filter-method="filterOptions"
filterable
multiple
placeholder="请选择"
@change="handleSelectChange"
>
<el-option
v-for="item in dialogForm.options.slice(0, 2)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item v-show="isAddUser === true" label="已选择用户">
<div class="tag">
<el-tag
v-for="id in dialogForm.selectedList"
:key="id"
closable
@close="removeTag(id)"
>
{{ getOptionLabel(id) }}
</el-tag>
</div>
</el-form-item>
// 自定义搜索逻辑,没问题了
filterOptions(value) {
if (value) {
const visibleOptions = this.dialogForm.options.filter((option) =>
option.name.toLowerCase().includes(value.toLowerCase())
)
this.dialogForm.options = visibleOptions
} else {
this.dialogForm.options = this.test
}
},
//展示选中内容
getOptionLabel(value) {
// const option = this.dialogForm.options.find(item => item.id === value);
const option = this.test.find((item) => item.id === value)
return option ? option.name : ''
},
//移除
removeTag(value) {
this.dialogForm.selectedList.splice(
this.dialogForm.selectedList.indexOf(value),
1
)
},
//选中赋值
handleSelectChange(values) {
this.dialogForm.selectedList = values
},
//弹窗-添加分销啇
handleAdd(row) {
console.log('row,这里获取编辑内容', row.users)
this.addDialog = true
this.isAddUser = true
this.title = '添加分销啇'
this.goodsID = row.id
// this.fetchDataUser()
getListUser(this.goodsID).then((dataID) => {
//初始数据
this.test = dataID
// 搜索
this.$set(this.dialogForm, 'options', dataID)
// 使用正则表达式匹配括号内的数字
this.dialogForm.selectedList = []
let searchStrings = row.users
if (row.users.length != 0) {
//有选中数据的回显
let foundUsers = this.dialogForm.options.filter((user) =>
searchStrings.some((searchString) => user.name === searchString)
)
foundUsers.forEach((i) => {
this.dialogForm.selectedList.push(i.id)
})
// console.log('ids,', foundUsers, this.dialogForm.selectedList)
} else {
this.dialogForm.selectedList = []
}
})
},