摄影网站的意义,江西省做网站,创新的模板网站建设,济南外贸建站一、组件介绍 人员组件在各系统的应用都是比较广泛的#xff0c;因此可以将其封装为可配置的人员组件#xff0c;根据不同角色权限显示对应的人员供选择#xff0c;代码目前只是一部分#xff0c;需要源码的私聊。 二、直接上代码
use.vue 父组件 div class因此可以将其封装为可配置的人员组件根据不同角色权限显示对应的人员供选择代码目前只是一部分需要源码的私聊。 二、直接上代码
use.vue 父组件 div classroot-contextel-dialogtitle人员选择custom-classdialog-custom-classdraggablev-modeldialogFormVisibleappend-to-bodypersonSelectionrefuserChoosev-ifdialogFormVisiblev-bindgetBindValues:userIdsprops.modelValueonChooseChangeonChooseChange:userListuserList/div slotfooter classel-dialog__footer flex justify-endel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickonConfirm()确 定/el-button/div/el-dialog
personSelection.vue 子组件
templatediv classhome_divdiv classcontentdiv classdata-warpel-inputclassdata-top-searchplaceholder输入关键字进行过滤v-modelfilterTextclearabletemplate #prependel-selectstylewidth: 120pxv-modelselectTypeplaceholder请选择el-optionv-for(type, index) in showTypeList:labeltype:valuetype:keyindex//el-select/template/el-inputel-treeclassdata-list:datatreeDatashow-checkbox:default-expanded-keysdefaultExpandedKeys:default-checked-keysdefaultCheckedKeysnode-keynodeIdreftree:expand-on-click-nodefalse:check-on-click-nodetrue:render-after-expandfalseempty-text暂无数据highlight-currentcheck-changehandleNodeCheckChange:filter-node-methodfilterNode:props{children: children,label: text}//divdiv classchoose-warpdiv classchoose-topspan已选{{ checkUserList.length }}人/spanel-button typedanger clickclearChoose()清空/el-button/divdiv classchoose-listel-tagclasschoose-tagv-fortag in checkUserList:keytag.idcloseremoveChooseTag(tag)closable{{ tag.text }}/el-tag/div/div/div/div
/template
树形数据可自行定义或调接口需要注意数据结构
三、效果展示
