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

This article will explain in detail how Tag in Vue Elementui interacts with other elements of the page. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Effect picture:

Train of thought

1. Check the multi-box, and the corresponding tag appears:

1. Using watch to listen for changes in the value A (array) bound by the marquee

two。 According to the change of A, the loop gets the name corresponding to the id with multiple check boxes, and forms the id and the corresponding name into a new array of objects.

3. Remove the object array from the previous step (product requirements, there can be no repetition in the tag) to get the result B.

4. Assign B to tags and show it in a loop

2. Click the delete button on tag to delete the current tag, and uncheck the corresponding check box:

1. When you click the tag delete button, you will get the id C of the current tag.

two。 Execute the method to remove the C from A

The method of reentering the first step of the 3.watch event

Summary: model A corresponding to the listening multi-box, according to the change of A, get the corresponding id and name, and assign values to tag for display. The deletion event of tag, in turn, controls the change of An and re-enters the method in the watch event.

It sounds very simple, and the train of thought is probably clear. First talk about the code corresponding to the above ideas, and then talk about the problems and holes encountered.

Code

Copy the whole piece of code into your elementUi project and you can see the effect {{item.name}} {{tag.name}} delete all export default {name: 'kk', mounted () {}, data () {return {msg:' Welcome to Your Vue.js App', tags: [], tempForm: {checkboxGroup5: [] / / selected personnel}, detailData: [], checkBox: [{name: 'Xiao Hong', id: '101'}, {name: 'Xiao Huang', id: '100'}, {name:' Xiao Ming', id: '102'}, {name: 'Xiao Ming', id: '102'}],}} Methods: {clearAll () {/ / clear all data this.tags = [] this.tempForm.checkboxGroup5 = []}, perChange (item) {this.detailData.push (item)}, handleClose (tag) {/ / remove the currently deleted tag let yourChoseTags = this.tempForm.checkboxGroup5 this.tempForm.checkboxGroup5 = yourChoseTags.filter (item = > {if (tag.id! = item) {return true}})} DelRepeat (arr) {/ / Array object return Object.values (arr.reduce ((obj, next) = > {var key = JSON.stringify (next)) Return (obj [key] = next), obj;}, {}),) }, moreArr () {let yourChose = this.tempForm.checkboxGroup5 let tempTags = [] tempTags = this.baseDataDetail (yourChose, this.checkBox, tempTags) this.detailData = tempTags}, baseDataDetail (yourChose, baseData) CallBack) {/ / encapsulated array method let temp = callBack / / cycle two data to get the initial data corresponding to the id of the selected checkbox yourChose.forEach (item = > {baseData.forEach (itemSecond = > {if (item = itemSecond.id) {temp.push (itemSecond)}}) return temp},}, watch: {detailData () {let tempArr = Object.assign ([]) This.detailData) tempArr = this.delRepeat (tempArr) / / console.log (tempArr) this.tags = tempArr}, "tempForm.checkboxGroup5" () {this.moreArr ()},}. TempArea {/ * width: 100% * /} .tagClass {margin-right: 10px;}

Noteworthy points:

1. At the end of the method in the listening event of the multi-box binding value tempForm.checkboxGroup5, I get a possible duplicate data (duplicate id and name), and then assign this array object containing duplicate data to another array detailData, and after watch listens to the array, after it is deduplicated, the assignment is shown to tags.

The reason for this is that in our requirements, in addition to selecting people from the current page, there is also a component for selecting employees throughout the company, so that people selected from any channel can finally point the results to detailData to ensure that the rendering is correct.

two。 If the array object is deduplicated, there may be objects with multiple id and duplicate names in the initial data (Xiao Ming). Even if there is no duplicate id in the model value of the bound multibox, multiple entries will be detected when using id to get the corresponding name, so that the tag may show duplicates.

Therefore, using this method, we can ensure that the final processed data is not duplicated, and tag will not display multiple identical data.

But what's a little inflexible about this method is that the data you want to deal with ({id:1,name:' Xiaoming', type:now}) will not be duplicated until both id and name,type are repeated.

Extension: it can be dynamically duplicated according to a property in the array object you set.

3. At first, I did the tag presentation logic on the multi-box change event, because you can get the currently selected name and id at the same time in the change event, but when you change, you don't know whether it is checked or unchecked, so there will be a problem with the tags display.

This logic may not be perfect, because it is possible that your staff is selected from other components, so there may be problems when you delete tag (let's not discuss this situation for the time being).

This is the end of this article on "how Tag in Vue Elementui interacts with other elements of the page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.