<el-form-item label="岗位">
<treeselect
:multiple="multiple"
v-model="form.postIds"
:options="postOptions"
:show-count="true"
placeholder="请选择岗位"
:limit="6"
:limitText="count => `及其它${count}项`"
/>
</el-form-item>
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
export default{
components: { Treeselect },
data(){
return{
postOptions: [],
form:{}
}},
created(){
post().then((response) => {//这是你从后台调数据的接口方法
this.postOptions = response.data
})
getUser(userId).then((response) => {//这是拿ids的给选框赋值
this.form = response.data
this.form.postIds = response.postIds
})
},
}
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>