菜单管理tree处理

.babelrc

    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", ["component", [
  "plugins": ["transform-runtime", "transform-vue-jsx", ["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node", "transform-vue-jsx", "istanbul"]
    }
  }
}

package.json

  },
  "dependencies": {
    "axios": "0.17.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-component": "0.10.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-polyfill": "6.26.0",
    "element-ui": "2.0.7",
    "vue": "2.5.2",

src/element-ui/index.js

  // DatePicker,
  // TimeSelect,
  // TimePicker,
  // Popover,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
// Vue.use(DatePicker)
// Vue.use(TimeSelect)
// Vue.use(TimePicker)
// Vue.use(Popover)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

src/views/menu/index.vue

        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <tree-table
      :columns="treeTableColumns"
    <el-tree
      :data="dataList"
      highlight-current-row
      border
      style="width: 100%;">
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="菜单名称">
      </el-table-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        label="上级菜单">
      </el-table-column>
      <el-table-column
        prop="icon"
        header-align="center"
        align="center"
        label="图标">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
        label="排序号">
      </el-table-column>
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        label="菜单URL">
      </el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        label="授权标识">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>
      :props="dataListTreeProps"
      :highlight-current="true"
      node-key="menuId"
      :default-expand-all="true"
      :expand-on-click-node="false"
      @mouseleave.native="dataListTreeActiveNodeId = 0"
      :render-content="dataListTreeRenderContent">
    </el-tree>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog
      :title="!addOrUpdateForm.userId ? '新增' : '修改'"
        </el-form-item>
        <el-form-item label="角色" size="mini" prop="roleIdList">
          <el-checkbox-group v-model="addOrUpdateForm.roleIdList">
            <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
            <!-- <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox> -->
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="状态" size="mini" prop="status">
</template>
<script>
  import TreeTable from '@/components/tree-table'
  import API from '@/api'
  import { treeDataTranslate } from '@/utils'
  import { isEmail, isMobile } from '@/utils/validate'
        }
      }
      return {
        dataForm: {
          userName: ''
        dataForm: {},
        dataListTreeProps: {
          label: 'name',
          children: 'children'
        },
        treeTableColumns: [
          {
            text: 'ID',
            value: 'menuId'
          }
        ],
        dataListTreeHandlebarVisible: false,
        dataListTreeActiveNodeId: 0,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        roleList: [],
        addOrUpdateDialogVisible: false,
        addOrUpdateForm: {
          userId: 0,
        }
      }
    },
    components: {
      TreeTable
    },
    activated () {
      this.getDataList()
    },
          this.dataListLoading = false
        })
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      // 树形数据列表, 呈现内容
      dataListTreeRenderContent (h, { node, data, store }) {
        return (
          <div on-mouseenter={ () => this.dataListTreeMouseenterHandle(node) } class="tree-handlebar">
            <span>{ data.menuId + '. ' + node.label }</span>
            {
              this.dataListTreeActiveNodeId === node.id
              ? <span class="tree-handlebar__btns">
                <el-button type="text" on-click={ () => this.append(data) }>修改</el-button>
                <el-button type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
              </span>
              : ''
            }
          </div>
        )
      },
      // 树形数据列表, 数据进入处理
      dataListTreeMouseenterHandle (node) {
        this.dataListTreeActiveNodeId = node.id
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
    }
  }
</script>
<style lang="scss">
  .mod-menu {
    .tree-handlebar {
      width: 100%;
    }
    .tree-handlebar__btns {
      margin-left: 15px;
      > .el-button {
        padding: 0;
        font-size: 12px;
      }
    }
  }
</style>