chenhaodong
71 lines
1.1 KiB
Vue
71 lines
1.1 KiB
Vue
<template>
|
|
|
|
<el-select
|
|
v-model="values"
|
|
:remote-method="fetchList"
|
|
style="width: 100%"
|
|
multiple
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
clearable
|
|
automatic-dropdown
|
|
placeholder="请选择角色"
|
|
@change="handlerChange"
|
|
>
|
|
<el-option
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
:label="item.title"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { fetchList } from '@/api/sys/role/role.js'
|
|
|
|
export default {
|
|
name: 'MeetRole',
|
|
props: {
|
|
modelValue: Array,
|
|
default: Array
|
|
},
|
|
data() {
|
|
return {
|
|
// 下拉选项值
|
|
list: [],
|
|
values: []
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
// 检测查询变化
|
|
modelValue: {
|
|
handler() {
|
|
this.values = this.modelValue
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created() {
|
|
this.values = this.modelValue
|
|
this.fetchList()
|
|
},
|
|
methods: {
|
|
|
|
fetchList() {
|
|
fetchList().then(response => {
|
|
this.list = response.data
|
|
})
|
|
},
|
|
handlerChange(e) {
|
|
this.$emit('change', e)
|
|
this.$emit('update:modelValue', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|