实现点击左边小目录，右边页面出现对应的数据

实现点击左边小目录，右边页面出现对应的数据条目

前端

一张页面分为左右两半，使用<el-col></el-col>实现，<avue-tree/>实现小目录展示，其中

:data="treeData"   代表展示的目录数据内容，

:option="treeOption"   代表展示字段

@node-click="nodeClick" 代表点击目录的行为反应

<template>
  <div class="execution">
  <basic-container>
      <el-row :span="24">
        <el-col
          :xs="24"
          :sm="24"
          :md="4"
          class="user__tree"
        >
          <avue-tree
            :option="treeOption"
            :data="treeData"
            @node-click="nodeClick"
          />
        </el-col>
        <el-col
          :xs="24"
          :sm="24"
          :md="19"
          class="user__main"
        >
          <avue-crud ref="crud"
                     :page="page"
                     :data="tableData"
                     :permission="permissionList"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     @on-load="getList"
                     @search-change="searchChange"
                     @refresh-change="refreshChange"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     @row-update="handleUpdate"
                     @row-save="handleSave"
                     @row-del="rowDel"
          >
            <template slot="searchbox">
              <query-box
                class="query-box-layout"
                :option="tableOption"
                @search-change="searchChange"
              >
              </query-box>
            </template>
            <template slot="menuLeft">
              <el-button type="primary" @click="give" icon="el-icon-plus">批量授权</el-button>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
  </basic-container>
  </div>
</template>

首先实现左边小目录，小目录一般情况下从数据库某个表查出，动态显示目录。

 data() {
    return {
      roleData: [],
      treeData: [],
      treeOption: {
        nodeKey: 'roleName',
        addBtn: false, // 改成true为多出个加号按钮
        menu: false,
        defaultExpandAll: false, // 默认为false不自动展开
        filter: true, // 默认为true,可以输入关键字进行过滤，出现目录上方搜索框
        props: {
          label: 'roleName',
          value: 'roleName'
        }
      },
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption
    }
  },

created() {
    this.init()  //初始加载执行目录数据查询方法
  },
  methods: {
    //目录数据查询
    init() {
    //调用方法后端返回数据列表
      getRoleList().then(response => {
        response.data.forEach(a => {
          let b = {
            roleId: a.roleId,   //目录数据的主键
            roleName: a.roleName
          }
          this.treeData.push(b)
        })
      })
    },
    nodeClick(data) {
      this.page.page = 1
      this.getList(this.page, { userRole: data.roleId })  //调用右边页面数据展示方法，传输所选目录的主键值
    },
    getList(page, params) {
      this.tableLoading = true
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除ID为' + row.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    handleSave: function (row, done, loading) {
      addObj(row).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.searchForm = form
      this.getList(this.page, form)
      done()
    },
    refreshChange() {
      this.getList(this.page)
    }
  }

export function getRoleList() {
  return request({
    url: '/admin/role/list',
    method: 'get',
  })
}
//JS方法调用后端