Shulou(Shulou.com)06/02 Report--

This article mainly introduces "vue+elementui how to achieve the drop-down form multi-selection and search function". In the daily operation, I believe that many people have doubts about how to achieve the drop-down form multi-selection and search function in vue+elementui. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for everyone to answer the question of "how to achieve the drop-down form multi-selection and search function in vue+elementui". Next, please follow the editor to study!

Combine drop-down boxes and tables on the basis of elementui

Template

Js

Export default {data () {return {ss:', visible: false, isDisabled: false, dataForm: {termName:', / / project name processDefinitionId: []}, dataRule: {processDefinitionId: [{required: true, message: 'please select file file', trigger: 'change'}], termName: [{required: true Message: 'Project name cannot be empty', trigger: 'blur'}],}, arr: [], processDefinition: [], / / process template drop-down box memberList: [], / / list showTree: false, Columns: [{prop:' number', label: 'file encoding'}, {prop: 'name' Label: 'file name'}, {prop: 'typename', label:' template type'}, {prop: 'efilename', label:' file type'}, {prop: 'version', label:' version'},], getRowKeys (row) {return row.id }, multipleSelection: [], isShowSelect: true}}, created () {}, mounted () {}, watch: {isShowSelect (val) {/ / hide the drop-down box this.$refs.select.blur ();},}, methods: {init () {this.$nextTick () = > {this.$refs ['dataForm'] .fields (); this.isDisabled = false This.arr = []; this.multipleSelection = [];}). Then () = > {/ / Archives documents drop-down box this.$axios.get ("/ term/getFileArchiveSelect"). Then ((res) = > {console.log ('Archives documents drop-down box:', res) If (res.data.code!) {this.memberList = []} else {this.processDefinition = res.data.page.list this.memberList = res.data.page.list// Table assignment}}) if (! this.dataForm.id) {/ / add / / this.menuListTreeSetCurrentNode ()} else {this.$axios.get ( "/ term/getTermDeatil/" + this.dataForm.id) .then ((res) = > {console.log ("Project details:" Res) If (res.data.code! = 200) {/ / this.$message.error (res.data.msg)} else {let data = res.data.termResVO; if (data.fileArchiveIds! ='') {this.dataForm.processDefinitionId = data.fileArchiveIds.split (',')} else {this.dataForm.processDefinitionId = []} this.multipleSelection = data.child This.rowMultipleChecked (this.multipleSelection);}})}) .catch ((error) = > {console.log (error);});}, / / form css getCellStyle () {return "text-align:center;"}, getHeaderCellStyle () {return "background: rgba (9,37,56); text-align:center Background: linear-gradient; padding: 4px 5px; "}, / / Click input to stop bubbling and control table to show hide deptogglePanel (event) {this.isShowSelect =! this.isShowSelect;// hide select's original drop-down box event | (event = window.event) event.stopPropagation? Event.stopPropagation (): (event.cancelBubble = true) this.showTree? This.tableHide (): this.tableShow ()}, / / display table tableShow () {this.showTree = true document.addEventListener ('click', this.tableHideList, false) this.rowMultipleChecked (this.multipleSelection) }, / / hide table tableHide () {this.showTree = false document.addEventListener ('click', this.tableHideList, false)}, tableHideList (e) {if (this.$refs.tableList & &! this.$refs.tableList.contains (e.target)) {this.tableHide ()}, / / Click table node handleRegionNodeClick (data) {this.showTree = true} / / multiple selection handleSelectClick (data) {this.showTree = true}, / / Select all selectAll (data) {this.showTree = true}, / / selection-change Table multiple Marquee change event handleChange (data) {/ / rows selected in the table this.arr = [] For (let i in data) {this.arr.push (data [I] .id)} this.dataForm.processDefinitionId = this.arr;//select assignment this.multipleSelection = data; / / check put in multipleSelection array}, / / Table multiple boxes select to judge rowMultipleChecked (multipleSelection) {console.log (multipleSelection) if (multipleSelection! = null) {for (let j = 0; j)

< multipleSelection.length; j++) { for (let i = 0; i < this.memberList.length; i++) { if (multipleSelection[j].id == this.memberList[i].id) {//如果在后端传来的值中id存在则选中多选框 this.$nextTick(() =>

{/ / required if (this.$refs.moviesTable! = undefined) {this.$refs.moviesTable.toggleRowSelection (this.memberList [I], true);}, / / Delete file handselect (value) {/ / select and table associated let data = this.multipleSelection; let arr = [] If (value.length > 0) {/ / delete value for (let j = 0; j) in multipleSelection (all selected values)

< data.length; j++) { if (value.indexOf(data[j].id) == -1) { data.splice(j, 1) } } this.multipleSelection = data } else { this.multipleSelection = []; data = []; } for (let s in data) { arr.push(data[s].id) } if (arr != null) {//需要判断那些值需要取消选中 for (let i = 0; i < this.memberList.length; i++) { if (arr.indexOf(this.memberList[i].id) == -1) { this.$refs.moviesTable.toggleRowSelection(this.memberList[i], false); } } } }, //搜索 handinput() { console.log(this.ss); this.tableShow() this.$axios.get('/term/getFileArchiveSelect').then((res) =>

{console.log (res) If (res.data.code!) {} else {this.processDefinition = res.data.page.list this.memberList = res.data.page.list console.log (this.memberList) let resultData = this.memberList.filter (data = > {if (data.number.indexOf (this.ss)! =-1 | | data.name.indexOf (this.ss)! =-1 | data.typename.indexOf (this.ss)) ! =-1 | | data.version.indexOf (this.ss)! =-1 | | data.efilename.indexOf (this.ss)! =-1) {/ / you can continue to add the judgment condition return true }}); this.memberList = resultData;}})}, / / form submission dataFormSubmit () {this.$refs ['dataForm'] .validate ((valid) = > {if (valid) {let url = this.dataForm.id?' / term/updateTerm':'/ term/addTerm' if (this.dataForm.id = ='') {this.isDisabled = true) } this.dataForm.id = this.dataForm.id | | undefined; console.log (this.dataForm);}})},},}

Css

.applicaWord .el-upload-list__item .el-icon-close-tip {display: none! important;} .treeDiv {position: absolute; top: 52px; left:-1px; z-index: 1000; width: 100%; overflow: auto; max-height: 280px; / * border: 1px solid # ccc; * / border-radius: 6px; background: # FFFFFF;} .treeDiv:-webkit-scrollbar {/ * scroll bar monolithic * / width: 4px / * height and width correspond to the size of the horizontal and vertical scroll bar * / height: 4px;} .treeDiv::-webkit-scrollbar-thumb {/ * inside the scroll bar * / border-radius: 5px;-webkit-box-shadow: inset 00 5px rgba (0,0,0,0.2); background: rgba (0,0,0,0.2) } .treeDiv::-webkit-scrollbar-track {/ * track in the scroll bar * /-webkit-box-shadow: inset 00 5px rgba (0,0,0,0.2); border-radius: 0; background: rgba (0,0,0,0.1);} .treeDiv. El-table {font-size: 14px;} .treeDiv. El-table / deep/ td {padding: 4px 0;} # selecTable. El-select {width: 100% } # selecTable. El-input {width: 100%;} # kuan .el-form-item__content {width: 80%;} at this point, the study on "how vue+elementui implements the multi-selection and search function of drop-down tables" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.