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

In this article Xiaobian for you to introduce in detail "Vue how to achieve Taobao shopping cart three-level selection function", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue how to achieve Taobao shopping cart three-level selection function" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Achieve:

1. All merchandise + shops are selected when all are selected; otherwise all are unchecked

two。 When the store is selected, all items in the current store are selected; otherwise, uncheck

3. All the goods in the store are selected by →; otherwise, the store is unselected.

4. Shop + all items selected → all selected button; otherwise unchecked

First of all, to be clear, I use vuex to manage shopping cart data, and all the ways to change the state of buttons are written in mutaition

Const state = {cartList: [], / / Shopping cart list totalCount: 0, allChecked: false, / / Select all shopCheckedNum: 0, / / number of shops selected / * cartList: [* {* shopName, * shopChecked: false, / / Store Select * proCheckedNum: 0 / / the number of items selected in the current store * cartGoodsInfo: [* {iid,styleName,proChecked...} / / there are all kinds of information about the goods. ProChecked is the product selection status * {...} *] *}, * {...} *] * /}

Html Select Button Section

/ / this is the select button, which I encapsulated as a component chooseClass to receive the value of the parent component to change the style when selected / / the selected button of the merchandise / / the select button of the store (I divided the store list and the product into two components, index is passed to the items in the store list) / / Select all button

The click method of goods, shops, all-select buttons

/ / index: store index value key: current item index value proCheckedClick (index, key) {this.$store.dispatch ("ProChecked", {index, key});}, shopCheckedClick (index) {this.$store.dispatch ("ShopChecked", index);}, allChecked () {this.$store.dispatch ("AllChecked");}

Mutations

/ / single commodity selected proCheckedTrue (state, {index, key}) {const cartList = state.cartList; cartlist [index]. Products [key] .proChecked = true; cartlist [index] .proCheckedNum + = 1; / / quantity of goods + 1}, / / single commodity unchecked proCheckedFalse (state, {index, key}) {const cartList = state.cartList; cartlist [index]. Productskey] .proChecked = false; cartlist [index] .proCheckedNum-= 1 }, / / shops select shopCheckedTrue (state, index) {const cartList = state.cartList; cartlist [index] .shopChecked = true; console.log (state.shopCheckedNum); state.shopCheckedNum + = 1; / number of stores + 1}, / / stores uncheck shopCheckedFalse (state, index) {const cartList = state.cartList; cartlist [index] .shopChecked = false; state.shopCheckedNum-= 1;}, / select allCheckedTrue (state) {state.allChecked = true }, / / deselect all allCheckedFalse (state) {state.allChecked = false;}

Because the method involves some logical judgment, I put all the logical judgment in actions.

/ / Product status ProChecked ({state, commit}, {index, key}) {const cartList = state.cartList; / / to be reversed here, because the proChecked is before the button is clicked! cartList [index]. Products [key] .proChecked? Commit ("proCheckedTrue", {index, key}): commit ("proCheckedFalse", {index, key}); / / all products are selected, and if (cartlist [index] .proCheckedNum = cartList [index] .products.length) {commit ("shopCheckedTrue", index) is selected in the selected store. } / / not all items selected → if the store is selected instead of selected / / (without this judgment condition, stores that were not selected will also execute shopCheckedFalse, resulting in the number of items selected will be-1) else if (cartlist [index] .shopChecked) {commit ("shopCheckedFalse", index) } / / determine whether the store selects all, and change the button status if (state.shopCheckedNum = cartList.length) {commit ("allCheckedTrue");} else {commit ("allCheckedFalse");}}, / / Store selection status ShopChecked ({state, commit}, index) {const cartList = state.cartList If (! cartlist [index] .shopChecked) {/ / Let the store select → to change the unselected items in the current store to commit ("shopCheckedTrue", index); for (let k in cartlist [index] .products) {if (! cartlist [index]. Products [k] .proChecked) {commit ("proCheckedTrue", {index, key: K}) } else {/ / Store deselect → to change all items in the current store to unchecked commit ("shopCheckedFalse", index); for (let k in cartlist [index] .products) {commit ("proCheckedFalse", {index, key: K});} if (state.shopCheckedNum = cartList.length) {commit ("allCheckedTrue");} else {commit ("allCheckedFalse") }}, / / Select all AllChecked ({state, commit}) {const cartList = state.cartList; if (! state.allChecked) {/ / all unselected stores + goods all select commit ("allCheckedTrue"); for (let i in cartList) {if (! cartList [I] .shopChecked) {commit ("shopCheckedTrue", I) } for (let k in cartList [I] .products) {if (! cartList [I]. Products [k] .proChecked) {commit ("proCheckedTrue", {index: I, key: K});} else {/ / deselect all → stores + products uncheck commit ("allCheckedFalse") For (let i in cartList) {commit ("shopCheckedFalse", I); for (let k in cartList [I] .products) {commit ("proCheckedFalse", {index: I, key: K});}

At first I put all this code in three methods, which can be written in this way, but it looks so messy that I can't track down exactly what was done. If you don't want to do so many ways, you can take a look.

/ / single item selected ProChecked (state, {index, key}) {const cartList = state.cartList; / / the selected status of the item is reversed cartList [index]. Products [key] .proChecked =! cartList [index]. Products[ key] .proChecked; / / if selected, quantity + 1, uncheck-1 if (cartList [index]. Productskey] .proChecked) {cartList [index] .proCheckedNum + + } else {cartList [index] .proCheckedNum -;} / / if all items are selected, the store selects Otherwise, shops uncheck if (cartList [index] .proCheckedNum = cartList [index] .products.length) {cartList [index] .shopChecked = true; state.shopCheckedNum++;} else if (cartList [index] .shopChecked) {cartList [index] .shopChecked = false; state.shopCheckedNum-- } / / determine whether the store selects all, and change the button status if (state.shopCheckedNum = cartList.length) {state.allChecked = true Read here, this "Vue how to achieve Taobao shopping cart three selection function" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

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.