iview菜单menu和checkbox结合,批量删除菜单栏

 实现样式

1.默认选中第一个菜单(我太笨了 这一点好难!贼累)

2.可以批量删除菜单栏

3.点击一级菜单显示对应数据(累死的第二步)

首先 如何拿到当前点击的menuitem的对象

就是使用@click.native  之前一直用click  发现不起作用

 

 

 获取到对象后就容易很多了  可以给后面的很多增删改查使用 因为里面不止包括了id (当然这玩意是接口返给咱的  不是自己创造的 没那么牛逼)

---

 下面的是我原来写的方法 主要是获取到了当前点击项checkbox的id 同时又自动默认选中第一个的id  但后来发现仅靠id很难实现其他增上改查的问题 

 activeName要在data里设置为空

其实这一步搞得我挺迷  说不上来怎么解释

之前name一直绑定的item.title   各种获取不到id 累死  后来百度原来要在314行拿到name

 有点乱   就是点击菜单栏需要获取到当前点击项的id才可以给右边的表格数据

但是写了两个重复接口  初始化数据//后面点击id获取的数据

是因为thisID是直接获取到的id(代码315行) 

this.dianone.id  是当前点击对象里的id  (这个id是数据第一条的id  见308行 所以是只能初始化 后面再点其他菜单 会报错)

所以我加了thisid  这样不论是刷新还是后面点击别的 都能获取到

  整体页面样式布局

    <Row type="flex">
        <i-col span="3" class-name="left-menu dark-scroll ">
          <div class="menu-head">字典分类</div>
          <!-- 左侧菜单形式 -->
          <div id="left_checkobx"></div>
          <div id="menu_box">
            <Checkbox-group
              v-model="checkAllGroup"
              @on-change="checkAllGroupChange"
            >
              <Menu
                width="auto"
                mode="vertical"
                theme="dark"
                @on-select="toqieOne"
                :active-name="activeName"
              >
                <!-- <Checkbox
                  v-for="(item, index) in checkObj"
                  :key="index"
                  :label="item.id"
                  >{{ item.title }}
                </Checkbox> -->
                <MenuItem
                  :name="item.id"
                  v-for="(item, index) in repairObj"
                  :key="index"
                >
                  <Checkbox :label="item.id">{{ item.title }} </Checkbox>
                  <!-- {{ item.title }} -->
                </MenuItem>
              </Menu>
            </Checkbox-group>
          </div>
        </i-col>
        <i-col span="20">
          <Table
            :columns="columns1"
            :max-height="$store.state.main.tableH"
            :data="data1"
            id="tab_keyTag"
          ></Table>
          <div class="page-box">
            <Page
              :current="pageNum"
              :total="total"
              :page-size="pageSize"
              :page-size-opts="[10, 20, 30, 50, 100]"
              @on-change="getPage"
              @on-page-size-change="changePageSize"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
        </i-col>
      </Row>