uniapp多级全选,三级全选,全选

本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题

所实现的效果如图

全选.gif

代码如下,注释齐全

• 本段代码用到uview的u-check,一张箭头图片, scss,引入initData,
• 三级全选,所操作的数据为字符串,如 "zjcb,yxhpcb,tghf,ztchf",所有全选数据通过初始化模拟数据实现,如果有现成的数据,改造即可
• cbAll 可以与 cbCheckChange 结合,但是会使cbCheckChange 更复杂,想实现可以自己动手

• 同级initData.js

const initData = {
  cbData: {
    code: 'cb',
    id: '23000',
    show: false,
    list: [
      { id: '23100', code:"zjcb", name: '直接成本', show: false, open:true,
        list: [
          { id: '23700', code:"yxhpcb", name: '货品成本', show: false, open: false, },
          { id: '23200', code:"tghf", name: '推广花费', show: false, open: true,
            list: [
              { id:'23201', code:"ztchf", name: '直通车花费', show: false },
              { id:'23202', code:"cjtjhf", name: '超级推荐花费', show: false },
              { id:'23203', code:"zzhf", name: '钻展花费', show: false },
              { id:'23204', code:"pxbhf", name: '品销宝花费', show: false },
              { id:'23205', code:"jhshf", name: '聚划算花费', show: false },
            ],
          },
          { id: '23300', code:"yxhf", name: '营销花费', show: false, open: true,
            list: [
              { id:'23301', code:"wxdhf", name: '无效单花费', show: false },
              { id:'23302', code:"shhf", name: '售后花费', show: false },
            ],
          },
        ],
      },
      { id: '24101', code:"jjcb", name: '间接成本', show: false, open:true,
        list: [
          { id: '24200', code:"jtcb", name: '均摊成本', show: false, open: false, },
        ],
      },
    ],
  },
}

export default initData