全选按钮

Question

您好，全选按钮好像只能全选，多次点击不能实现全选全不选功能

Answer 1

希望林柚一健康快乐成长 2022-03-10 11:45:26

希望可以帮到你哟

• 绵羊旅馆lnn #1

  这样写我这里还是不能实现全选全不选，第54行改成这个就可以：
  const result = !payload.allChecked.value

• 希望林柚一健康快乐成长 回复 绵羊旅馆lnn #2

  你的allchecked应该是ref属性包裹得值，所以要用到value,我没有用ref声明这个变量，所以不需要使用value

Answer 2

火源之地小白人 2022-03-12 11:00:11

刚好也想实现这个需求，vuex -> mutations -> 全选按钮commit

selectAll (state, payload) {
    const { shopId } = payload
    const products = state?.carts[shopId]
    if (products) {
        const productsDeepCopy = JSON.parse(JSON.stringify(products))
        const allSelectedRes = Object.values(productsDeepCopy).some((product) => product.check === false)
        // 切换是否全选
        const toggleStatus = (products, selectStatus) => {
            for (const i in products) {
                const product = products[i]
                product.check = selectStatus
            }
        }
        // 没全选，就全选
        if (allSelectedRes) {
            toggleStatus(products, true)
        } else {
            // 已全选，全不选
            toggleStatus(products, false)
        }
    }
}

Answer 3

Evonne_xy 2022-01-05 17:49:48

CART.VUE 文件

const allCheck = ref(true) //设置一个ref值可以reactive

  const IfAllCheck = computed(() => {

    const productList = cartList[shopId]

    allCheck.value = true //这里将他设置为true, 目的是当你把某个item前的对勾点掉后，由于是computed会重新执行这个方法，每当变化的时候，都会将allcheck值先为true，再去判断是否要将他置为false。好处是为了避免，你最后把下面的所有勾都打上了，他的全选图标会变

    for (let i in productList) {

      const product = productList[i]

      if (product.count > 0 && product.check == false) {

        allCheck.value = false

      }

    }

    return allCheck.value

  })

  const handleAllCheckClick = ()=> {

    allCheck.value = !allCheck.value //用户点击后，需要将allCheck的值取反，然后把他作为值传入

    console.log(allCheck.value)

    store.commit('handleAllCheckClick', { shopId,allCheck })

  }

STORE.index 文件

handleAllCheckClick(state,payload) {

      const {shopId,allCheck} = payload;

      for(let i in state.cartList[shopId]){

          if(allCheck.value == true){  

            state.cartList[shopId][i].check = true;

          }else{

            state.cartList[shopId][i].check = false

          } 

      }

    },

楼上说的那个取反，我前面也是这么想的，发现不行，如果把某个取消，再点击全选会有问题，（你可以试试，看看问题在哪里）。所以我们需要知道check的值，所以我将它设置为了ref变量，写在这两个function的外面，在store里进行判断，如果他是true，将所有的都置为true，如果为false，把所有置为false

希望可以帮到你~

Answer 4

weixin_慕尼黑2291373 2021-08-23 15:34:10

可以把原来的逻辑produck.check = false改为product.check = !produck.check

Answer 5

Dell 2021-03-29 23:51:02

同学可以自己补一个相关逻辑即可

Answer 6

无敌的老虎 2021-03-29 11:20:32

都有清空购物车了，还要全不选干什么，全不选自己移除一下数据就好了，什么都等老师现成的？

• Evonne_xy #1

  不懂为什么要讲人家... 如果你会 你就贴代码，懒得贴就不贴。讲人家干嘛？这种风气 不是在课程的问答区里应该有的。如果有时间，请你去看看udemy里课程那些同学的问答风气吧。

• qq_Simpleisbeau_0 #2

  活该被人怼，最讨厌你这种杠精