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