vue树形下拉多选组件vue-treeselect基础使用


​官网使用方法:Vue-Treeselect | Vue-Treeselect 中文网    进阶版请查看:https://www.cnblogs.com/gyw1996/p/15923912.html

//vue页面

 <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>
//vue页面方法
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)
=> {//这里也是调用的后台接口
this.form = response.data //这是我自己页面要用的数据

//
this.form.postIds就是多选选中的数据
 this.form.postIds = response.postIds //这里是赋值,之前已经选中的数据
 })
},
}

 

 
 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM