基于VUE和elementUI的多选、全选以及单选

时间 2019-11-16
标签基于 vue elementui 全选以及单选繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>element-ui的el-checkbox嵌套多选</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./ele.css">
</head>
<body>
  <div id="app">
    <div slot="content" style="width: 600px; padding: 0 40px;margin: 0 auto;">
      <div class="checkbox-table" v-for="(item, indexkey) in menu" :key="item.id">
        <template>
          <el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px " v-model='menusIds' :label="item.id" @change='handleCheck(1,indexkey)'>
            {{item.name}}
          </el-checkbox>
          <div style="margin-bottom: 20px;">
            <div v-for="list in item.children" class="line-check" :key="list.id" style="display: inline-block; margin-left: 20px;margin-bottom: 20px;" >
              <el-checkbox class="check2" @change='handleCheck(2,indexkey)' v-model="menusIds" :label="list.id">
                {{list.name}}
              </el-checkbox>
            </div>
          </div>
        </template>
        <div @click="test">提交</div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        menu:[{
          "id": 1,
          "name": "首页",
          "ename": "home",
          "path": "/home",
          "pid": 0,
          "children": []
        },
                {
                  "id": 2,
                  "name": "订单",
                  "ename": "order-manage",
                  "path": "/order-manage",
                  "pid": 0,
                  "children": []
                },
                {
                  "id": 3,
                  "name": "导师管理",
                  "ename": "teacher-manage",
                  "path": "/teacher-manage",
                  "pid": 0,
                  "children": []
                },
                {
                  "id": 4,
                  "name": "课程管理",
                  "ename": "course-manage",
                  "path": "/course-manage",
                  "pid": 0,
                  "children": [{
                    "id": 5,
                    "name": "课程模板",
                    "path": "template",
                    "pid": 4,
                    "children": []
                  }, {
                    "id": 6,
                    "name": "课程列表",
                    "path": "list",
                    "pid": 4,
                    "children": []
                  }, {
                    "id": 7,
                    "name": "已归档课程",
                    "path": "archive-course",
                    "pid": 4,
                    "children": []
                  }]
                },
                {
                  "id": 8,
                  "name": "内容",
                  "ename": "content",
                  "path": "/content",
                  "pid": 0,
                  "children": [{
                    "id": 9,
                    "name": "广告位",
                    "path": "banner",
                    "pid": 8,
                    "children": []
                  }, {
                    "id": 10,
                    "name": "关于咱们",
                    "path": "about",
                    "pid": 8,
                    "children": []
                  }]
                },
                {
                  "id": 11,
                  "name": "用户",
                  "ename": "user",
                  "path": "/user",
                  "pid": 0,
                  "children": [{
                    "id": 12,
                    "name": "用户管理",
                    "path": "user-manage",
                    "pid": 11,
                    "children": []
                  }, {
                    "id": 13,
                    "name": "主办方",
                    "path": "user-server",
                    "pid": 11,
                    "children": []
                  }, {
                    "id": 14,
                    "name": "组织者",
                    "path": "user-seller",
                    "pid": 11,
                    "children": []
                  }]
                },
                ],
        menusIds: []
      }
    },
    methods: {
      test(){
        console.log(this.menusIds);
      },
      // 处理选择事件
      handleCheck(type, a = 0) { // 多选框
        let self = this;
        if (type == 2) { // 二级菜单点击
          let index = 0;
          self.menu[a].children.map(item => {
            if (self.menusIds.indexOf(item.id) > -1) {
              index += 1;
            }
          })
          if (index > 0) {
            if (self.menusIds.indexOf(self.menu[a].id) < 0) {
              self.menusIds.push(self.menu[a].id);
            }
          } else {
            if (self.menusIds.indexOf(self.menu[a].id) > 0) {
              self.menusIds.splice(self.menusIds.indexOf(self.menu[a].id), 1);
            }
          }
        } else {
          if (self.menusIds.indexOf(self.menu[a].id) > -1) {
            self.menu[a].children.map(item => {
              if (self.menusIds.findIndex((n) => n == item.id) < 0) {
                self.menusIds.push(item.id)
              }
            })
          } else {
            self.menu[a].children.map(item => {
              if (self.menusIds.findIndex((n) => n == item.id) > -1) {
                self.menusIds.splice(self.menusIds.findIndex((n) => n == item.id), 1);
              }
            })
          }
        }
      },
      //编辑某个菜单
      handleEdit(obj) {
        let self = this;
        self.obj = obj;
        let array = obj.menuIds ? obj.menuIds.split(',') : []
        let arr = [];
        array.map(item => {
          arr.push(parseInt(item));
        })
        this.menusIds = arr;
      },
      // 获取全部菜单列表
      async _allMenuApi() {
        let res = await fetchRights();
        if (res.code == 200) {
          this.menu = res.data.allMenus;
        }
      }
    }
  })
</script>
</html>