Vue Multi-selection menu component Development _javascript Skills

The example of this article for everyone to share the Vue multilevel multiple selection menu components of the production method for your reference, the specific content as follows

To develop one of these multilevel multiple-selection menu components, the function is:

Click on the parent title bar to open and collapse the child list
Click on the parent title bar check icon to select or cancel the sub-list
Click on the list of check icon to achieve the full selection, the parent title bar check icon automatically tick; on the contrary, when the election is not reached, the parent title bar check icon automatically canceled check
When all the parent title bar's check icon reaches the full selection, the bottom of the Full selection box automatically check, on the other hand, did not reach the full selection, the bottom of the full selection box automatically uncheck
Click on the bottom of the full selection box to select All or cancel all the check icon

So summing up our focus is to use the sub-list to check which items to calculate whether the parent title and the bottom of the full selection box is automatically checked or automatically canceled, and the parent title and the bottom of the full selection box in the selection of changes in the child list should be what changes. To do this, the implementation process is:

Build our model layer data

Datas: [
 {
 ///used to determine whether to show the child list
 isshowlistitem:false,
 //To record which subkeys are selected
 selected: [],
 //Parent title
 ListTitle: "Poly South Yue Wan",
 //Sub list
 ListItem: [
 {
 id:1,
 name: "Bruce Lee"
 },
 {
 id:2,
 name: "Chow Chi"
 },
 {
 id:3,
 name: "Jay Chou"
 }
 ]
 },
 {
 isshowlistitem:false,
 selected: [],
 ListTitle: "Nanzhuang Vanke City",
 listItem: [
 {
 id:4,
 name: "The Great Lord"
 },
 {
 id:5,
 name: "Old Monster"
 }
 ]
 }
]

Which items are checked by the record sub-list
The child list is bound to the selected array by v-model= "data.selected", and when the checked of the child list item changes, the ID of the current item is recorded in the selected array.

<input 
type= "checkbox"
: value= "item.id"
v-model= "data.selected"
>

How to handle the changes when the parent title is checked
Automatically handle changes to the parent header check icon
in HTML, by binding: checked= "istitlechecked (data)," When other items change, The parent title will call Istitlechecked this method to determine if your own checked state is true or false, thus achieving the goal of automatically changing the parent title according to the number of children selected.
@change= "changetitlechecked (data, $event)" triggers whenever the parent header is actively checked or canceled
Parent title HTML

<input:id= "Data.listtitle"
 class= "list-input"
 type= "checkbox"
 : checked= "istitlechecked" (data) "
 @change =" changetitlechecked (data, $event)
>

Parent Title JS

changetitlechecked Method: When actively triggering the check icon for the parent header, if the trigger chaeked state is true, select all unselected items in the list item and add them all to the selected array If False, the selected array is cleared, that is, the list item is unchecked.
istitlechecked method: Automatically check the parent caption when all child list items are selected.

/**
* Processing method when the parent header state changes
* @param data [data for current item]
* @param event [Event of current Item] *
*
changetitlechecked: function (data,event) {
 if (event.target.checked = = True) {
 Data.listItem.forEach (function (item) {
 Data.selected.indexOf (item.id) = = = 1 && data.selected.push (item.id);
 })
 } else {
 data.selected = [];
 }
}

/**
* To determine the parent header selection status
* @param data [current item data]
* @returns {boolean
}
/Istitlechecked:function ( Data) {
 var _selected = data.selected;
 var _listitem = Data.listitem;
 Verify that the selected contains all the item IDs if it is proof title to select Return
 _listitem.every (function (item) {return
 _ Selected.indexof (item.id)!=-1;
 });

When the bottom of the full selection of the box to change the processing method
Automatically handles changes to the bottom selection box

All marquee HTML:

<input id= "all-checked"
 type= "checkbox"
 : checked= "isallchecked ()"
 @change = "changeallchecked ($ Event) "
>

Full-selection box JS:

Changeallchecked method: When the full selection box is actively triggered, if checked is true, all subkeys are placed into the selected array, and the entire selected array is emptied.
Isallchecked method: Determines whether the length of the selected array is equal to the number of all subkeys, and if it is equal, the checked state of the full selection box is set to true.

/**
* The callback method for the change event of the full selection box
* @param event */
changeallchecked:function (event) {
 if ( event.target.checked = = True) {
 This.datas.forEach (function (data) {
 Data.listItem.forEach (function (item) {
 data.selected.indexOf (item.id) = = = 1 && data.selected.push (item.id);})}
else {
 This.datas.forEach (function (data) {
 data.selected = [];
 }}
 }
}

/**
* Select the status of the full selection box
* @returns {boolean} *
/isallchecked:function () {return
 this.datas.every ( function (data) {return
 data.selected.length = = data.listItem.length;
 });

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.