【vue】avue-crud表格树示例

1.效果图

2.前端代码

<template>
  <div class="app-container pull-height">
    <el-form inline ref="searchForm" v-model="searchForm">
      <el-form-item label="菜单名称：">
        <el-input size="small" v-model="searchForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" icon="el-icon-search" type="primary" @click="getList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" icon="el-icon-delete" type="primary" @click="handleEmpty">清空</el-button>
      </el-form-item>
    </el-form>
    <avue-crud 
      :option="tableOption"
      :table-loading="loading"
      :data="tableData"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange" 
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
      @on-load="getList"
      @tree-load="treeLoad"
    >
      <template slot-scope="scope" slot="menu">
	      <!-- <el-link :size="small" type="text" style="padding: 0 0;color:#409eff"  @click.stop="handleUpdate(scope.row, scope.index)">修改</el-link>
	      <el-link :size="small" type="text" style="padding: 0 0;color:#f56c6c"  @click.stop="handleDel(scope.row, scope.index)">删除</el-link> -->
        <!-- <el-button size="small" type="text" icon="el-icon-setting" @click.stop="handlePrivilege(scope.row, scope.index)">权限设置</el-button> -->
      </template>
    </avue-crud>
   
  </div>
</template>
<script>
// 接口引入
import { add, update, get, remove, tree, one} from "@/api/system/menu";
import iconList from "@/config/iconList";
export default {
  name: "menu",
  data() {
    return {
      permissionList: {},
      selectionList: [],
      form: {},
      parentId: 0,
      searchForm: {
        name: ''
      },
      loading: false,
      tableData: [],
      page: {
        current: 1,
        total: 1,
        pageSize: 10
      },
      tableOption: {
        lazy: true,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        dialogWidth: "60%",
        tree: true,
        border: true,
        index: false,
        selection: true,
        viewBtn: true,
        menuWidth: 300,
        dialogClickModal: false,
        column: [
          {
            label: "菜单名称",
            prop: "name",
            search: false,
            maxlength: 200,
            rules: [
              {
                required: true,
                message: "请输入菜单名称",
                trigger: "blur"
              }
            ]
          },
          {
            label: "路由地址",
            prop: "path",
            rules: [
              {
                required: true,
                message: "请输入路由地址",
                trigger: "blur"
              }
            ]
          },
          {
            label: "上级菜单",
            prop: "parentId",
            type: "tree",
            dicData: [],
            hide: true,
            props: {
              label: "name",
              value: 'id',
              key: 'id'
            },
            rules: [
              {
                required: false,
                message: "请选择上级菜单",
                trigger: "click"
              }
            ]
          },
          {
            label: "菜单图标",
            prop: "icon",
            type: "icon",
            slot: true,
            iconList: iconList,
            rules: [
              {
                required: false,
                message: "请输入菜单图标",
                trigger: "click"
              }
            ]
          },
          {
            label: "菜单排序",
            prop: "sort",
            type: "number",
            rules: [
              {
                pattern: /^-?\d+\.?\d*$/,
                required: true,
                message: "请输入菜单排序",
                trigger: "blur"
              }
            ]
          }
        ]
      },
    } 
  },
  methods: {
    beforeClose(done) {
      this.$refs.crud.tableForm = {};
      this.$refs.crud.value.parentId = "";
      this.$refs.crud.value.addDisabled = false;
      this.$refs.crud.option.column.filter(item => {
        if (item.prop === "parentId") {
          item.value = "";
          item.addDisabled = false;
        }
      });
      done();
    },
    searchChange(params, done) {
      this.parentId = '';
      this.getList();
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    handleEmpty(){
      this.searchForm.name = '';
    },
    refreshChange() {
      this.getList();
    },
    treeLoad(tree, treeNode, resolve) {
      var id = tree.id;
      get(Object.assign({
        parentId: tree.id
      })).then((response) => {
        resolve(response.data.data);
      })
    },
    beforeOpen(done, type) {
      if (["add", "edit"].includes(type)) {
        this.$refs.crud.tableForm = {};
        this.initData();
      }
      if (["edit", "view"].includes(type)) {
        one(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    initData() {
      tree().then(res => {
        const column = this.findObject(this.tableOption.column, "parentId");
        column.dicData = res.data.data;
      });
    },
    handlePrivilege(){
      
    },
    getList(){
      this.tableData = []
      get(Object.assign({
        parentId: this.parentId
      },this.searchForm)).then((response) => {
        this.tableData = response.data.data;
      })
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        // 数据回调进行刷新
        done(row);
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    handleDel(row, index) {
      this.$refs.crud.rowDel(row, index)
    },
    rowDel(row, index, done) {
      var _this = this;
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return remove(row.id);
      }).then(() => {
        // if(row.parentId != 0){
        //   _this.$set(_this.$refs.crud.$refs.table.store.states.lazyTreeNodeMap, row.parentId, [])
        // }
        // _this.getList()
        done(row)
        _this.getList()
        _this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },
    rowSave (row, done, loading) {
      add(Object.assign({
        // createUser: this.user.name
      }, row)).then((response) => {
        row.id = response.data.data.id
        this.$message.success('新增成功')
        // this.getList()
        done(row)
      }).catch((error) => {
        console.log(error)
        this.$message.warning('新增失败')
        // loading()
        // done(row);
      })
    }
  },
};
</script>

3.图标列表

export default [
    {
      label: '通用图标',
      list: [
        'el-icon-platform-eleme',
        'el-icon-eleme',
        'el-icon-delete-solid',
        'el-icon-delete',
        'el-icon-s-tools',
        'el-icon-setting',
        'el-icon-user-solid',
        'el-icon-user',
        'el-icon-phone',
        'el-icon-phone-outline',
        'el-icon-more',
        'el-icon-more-outline',
        'el-icon-star-on',
        'el-icon-star-off',
        'el-icon-s-goods',
        'el-icon-goods',
        'el-icon-warning',
        'el-icon-warning-outline',
        'el-icon-question',
        'el-icon-info',
        'el-icon-remove',
        'el-icon-circle-plus',
        'el-icon-success',
        'el-icon-error',
        'el-icon-zoom-in',
        'el-icon-zoom-out',
        'el-icon-remove-outline',
        'el-icon-circle-plus-outline',
        'el-icon-circle-check',
        'el-icon-circle-close',
        'el-icon-s-help',
        'el-icon-help',
        'el-icon-minus',
        'el-icon-plus',
        'el-icon-check',
        'el-icon-close',
        'el-icon-picture',
        'el-icon-picture-outline',
        'el-icon-picture-outline-round',
        'el-icon-upload',
        'el-icon-upload2',
        'el-icon-download',
        'el-icon-camera-solid',
        'el-icon-camera',
        'el-icon-video-camera-solid',
        'el-icon-video-camera',
        'el-icon-message-solid',
        'el-icon-bell',
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-home',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-share',
        'el-icon-d-caret',
        'el-icon-caret-left',
        'el-icon-caret-right',
        'el-icon-caret-bottom',
        'el-icon-caret-top',
        'el-icon-bottom-left',
        'el-icon-bottom-right',
        'el-icon-back',
        'el-icon-right',
        'el-icon-bottom',
        'el-icon-top',
        'el-icon-top-left',
        'el-icon-top-right',
        'el-icon-arrow-left',
        'el-icon-arrow-right',
        'el-icon-arrow-down',
        'el-icon-arrow-up',
        'el-icon-d-arrow-left',
        'el-icon-d-arrow-right',
        'el-icon-video-pause',
        'el-icon-video-play',
        'el-icon-refresh',
        'el-icon-refresh-right',
        'el-icon-refresh-left',
        'el-icon-finished',
        'el-icon-sort',
        'el-icon-sort-up',
        'el-icon-sort-down',
        'el-icon-rank',
        'el-icon-loading',
        'el-icon-view',
        'el-icon-c-scale-to-original',
        'el-icon-date',
        'el-icon-edit',
        'el-icon-edit-outline',
        'el-icon-folder',
        'el-icon-folder-opened',
        'el-icon-folder-add',
        'el-icon-folder-remove',
        'el-icon-folder-delete',
        'el-icon-folder-checked',
        'el-icon-tickets',
        'el-icon-document-remove',
        'el-icon-document-delete',
        'el-icon-document-copy',
        'el-icon-document-checked',
        'el-icon-document',
        'el-icon-document-add',
        'el-icon-printer',
        'el-icon-paperclip',
        'el-icon-takeaway-box',
        'el-icon-search',
        'el-icon-monitor',
        'el-icon-attract',
        'el-icon-mobile',
        'el-icon-scissors',
        'el-icon-umbrella',
        'el-icon-headset',
        'el-icon-brush',
        'el-icon-mouse',
        'el-icon-coordinate',
        'el-icon-magic-stick',
        'el-icon-reading',
        'el-icon-data-line',
        'el-icon-data-board',
        'el-icon-pie-chart',
        'el-icon-data-analysis',
        'el-icon-collection-tag',
        'el-icon-film',
        'el-icon-suitcase',
        'el-icon-suitcase-1',
        'el-icon-receiving',
        'el-icon-collection',
        'el-icon-files',
        'el-icon-notebook-1',
        'el-icon-notebook-2',
        'el-icon-toilet-paper',
        'el-icon-office-building',
        'el-icon-school',
        'el-icon-table-lamp',
        'el-icon-house',
        'el-icon-no-smoking',
        'el-icon-smoking',
        'el-icon-shopping-cart-full',
        'el-icon-shopping-cart-1',
        'el-icon-shopping-cart-2',
        'el-icon-shopping-bag-1',
        'el-icon-shopping-bag-2',
        'el-icon-sold-out',
        'el-icon-sell',
        'el-icon-present',
        'el-icon-box',
        'el-icon-bank-card',
        'el-icon-money',
        'el-icon-coin',
        'el-icon-wallet',
        'el-icon-discount',
        'el-icon-price-tag',
        'el-icon-news',
        'el-icon-guide',
        'el-icon-male',
        'el-icon-female',
        'el-icon-thumb',
        'el-icon-cpu',
        'el-icon-link',
        'el-icon-connection',
        'el-icon-open',
        'el-icon-turn-off',
        'el-icon-set-up',
        'el-icon-chat-round',
        'el-icon-chat-line-round',
        'el-icon-chat-square',
        'el-icon-chat-dot-round',
        'el-icon-chat-dot-square',
        'el-icon-chat-line-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-turn-off-microphone',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
        'el-icon-medal-1',
        'el-icon-medal',
        'el-icon-trophy',
        'el-icon-trophy-1',
        'el-icon-first-aid-kit',
        'el-icon-discover',
        'el-icon-place',
        'el-icon-location',
        'el-icon-location-outline',
        'el-icon-location-information',
        'el-icon-add-location',
        'el-icon-delete-location',
        'el-icon-map-location',
        'el-icon-alarm-clock',
        'el-icon-timer',
        'el-icon-watch-1',
        'el-icon-watch',
        'el-icon-lock',
        'el-icon-unlock',
        'el-icon-key',
        'el-icon-service',
        'el-icon-mobile-phone',
        'el-icon-bicycle',
        'el-icon-truck',
        'el-icon-ship',
        'el-icon-basketball',
        'el-icon-football',
        'el-icon-soccer',
        'el-icon-baseball',
        'el-icon-wind-power',
        'el-icon-light-rain',
        'el-icon-lightning',
        'el-icon-heavy-rain',
        'el-icon-sunrise',
        'el-icon-sunrise-1',
        'el-icon-sunset',
        'el-icon-sunny',
        'el-icon-cloudy',
        'el-icon-partly-cloudy',
        'el-icon-cloudy-and-sunny',
        'el-icon-moon',
        'el-icon-moon-night',
        'el-icon-dish',
        'el-icon-dish-1',
        'el-icon-food',
        'el-icon-chicken',
        'el-icon-fork-spoon',
        'el-icon-knife-fork',
        'el-icon-burger',
        'el-icon-tableware',
        'el-icon-sugar',
        'el-icon-dessert',
        'el-icon-ice-cream',
        'el-icon-hot-water',
        'el-icon-water-cup',
        'el-icon-coffee-cup',
        'el-icon-cold-drink',
        'el-icon-goblet',
        'el-icon-goblet-full',
        'el-icon-goblet-square',
        'el-icon-goblet-square-full',
        'el-icon-refrigerator',
        'el-icon-grape',
        'el-icon-watermelon',
        'el-icon-cherry',
        'el-icon-apple',
        'el-icon-pear',
        'el-icon-orange',
        'el-icon-coffee',
        'el-icon-ice-tea',
        'el-icon-ice-drink',
        'el-icon-milk-tea',
        'el-icon-potato-strips',
        'el-icon-lollipop',
        'el-icon-ice-cream-square',
        'el-icon-ice-cream-round',
      ]
    }
  ]

4.api

import request from '@/router/axios'; 
import { prefixUrl } from '@/config/env';
export function get(query) {
  return request({
    url: prefixUrl+'/menu/list',
    method: 'get',
    params: query
  })
}

export function add(obj) {
  return request({
    url: prefixUrl+'/menu/',
    method: 'post',
    data: obj
  })
}

export function update(obj) {
  return request({
    url: prefixUrl+'/menu/',
    method: 'put',
    data: obj
  })
}

export function remove(id) {
  return request({
    url: prefixUrl+'/menu/' + id,
    method: 'delete'
  })
}

export function tree(query) {
  return request({
    url: prefixUrl+'/menu/tree',
    method: 'get',
    params: query
  })
}

export function one(id){
  return request({
    url: prefixUrl+'/menu/one/' + id,
    method: 'get'
  })
}

5.后端代码

import cn.hutool.core.bean.BeanUtil;
import com.mzbz.warehousemanagementsystem.entity.Menu;
import com.mzbz.warehousemanagementsystem.service.MenuService;
import com.mzbz.warehousemanagementsystem.util.Func;
import com.mzbz.warehousemanagementsystem.util.api.R;
import com.mzbz.warehousemanagementsystem.vo.MenuTree;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * @创建时间 2021/7/6
 * @描述 菜单
 */
@Slf4j
@RestController
@AllArgsConstructor
@RequestMapping("menu")
@Api(value = "菜单", tags = "菜单")
public class MenuController {

    private final MenuService menuService;


    /**
     * 查询
     */
    @GetMapping("/one/{id}")
    public R one(@PathVariable("id") Long id){
        Menu menu = menuService.getById(id);
        return R.data(menu);
    }
    /**
     * 查询
     */
    @GetMapping("/list")
    public R list(@RequestParam Map<String,Object> params){
        List<Menu> menuList = menuService.getMenuList(params);
        List<Menu> tempList = menuService.list();
        Map<Long, List<Menu>> menuMap = tempList.stream().collect(Collectors.groupingBy(Menu::getParentId));
        List<MenuTree> menuTreeList = menuList.stream().map(menu -> {
            MenuTree menuTree = new MenuTree();
            BeanUtil.copyProperties(menu, menuTree);
            if(menuMap.containsKey(menu.getId())) {
                menuTree.setHasChildren(true);
            }else{
                menuTree.setHasChildren(false);
            }
            return menuTree;
        }).collect(Collectors.toList());
        return R.data(menuTreeList);
    }

    /**
     * 查询
     */
    @GetMapping("/tree")
    public R tree(@RequestParam Map<String,Object> params){
        List<MenuTree> menuList = menuService.getMenuTree(params);
        return R.data(menuList);
    }
    /**
     * 分页查询全部记录
     * @param params
     * @return
     */
//    @GetMapping("/page")
//    @ApiOperation(value = "分页", notes = "分页")
//    public R<Page<Role>> page(@ApiIgnore @RequestParam Map<String, Object> params, Query query) {
//        // 查询分页数据
//        Page<Role> rolePage = menuService.page(params, query);
//        return R.data(rolePage);
//    }

    /**
     * 新增
     * @return
     */
    @PostMapping
    @ApiOperation(value = "新增", notes = "新增")
    public R save(@RequestBody Menu menu) {
        boolean result = menuService.save(menu);
        if(result){
            MenuTree menuTree = new MenuTree();
            BeanUtil.copyProperties(menu,menuTree);
            menuTree.setHasChildren(false);
            return R.data(menuTree);
        }
        return R.status(result);
    }

    /**
     * 更新
     * @return
     */
    @PutMapping
    @ApiOperation(value = "更新", notes = "更新")
    public R update(@RequestBody Menu menu) {
        boolean result = menuService.updateById(menu);
        if(result){
            MenuTree menuTree = new MenuTree();
            BeanUtil.copyProperties(menu,menuTree);
            menuTree.setHasChildren(false);
            return R.data(menuTree);
        }
        return R.status(result);
    }

    /**
     * 删除
     */
    @DeleteMapping("/{id}")
    public R delete(@PathVariable("id") Long id){
        if(Func.isNotEmpty(id)){
            boolean b = menuService.removeById(id);
            if(b){
                menuService.updateMenuByParentId(id);
            }
            return R.status(b);
        }else{
            return R.status(true);
        }
    }
}

6.sql语句

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for menu
-- ----------------------------
DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu`  (
  `id` bigint(20) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `parent_id` bigint(20) DEFAULT 0,
  `icon` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `sort` int(11) DEFAULT NULL,
  `create_user` int(11) DEFAULT NULL COMMENT '创建人',
  `create_dept` int(11) DEFAULT NULL COMMENT '创建部门',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_user` int(11) DEFAULT NULL COMMENT '更新人',
  `update_user_name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '更新人姓名',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `status` int(1) DEFAULT NULL COMMENT '业务状态',
  `is_deleted` int(1) DEFAULT NULL COMMENT '是否删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of menu
-- ----------------------------
INSERT INTO `menu` VALUES (1412786680213598209, '系统设置', 0, 'el-icon-setting', '/system', 1, NULL, NULL, '2021-07-07 22:52:47', NULL, NULL, '2021-07-07 22:52:47', 1, 0);
INSERT INTO `menu` VALUES (1413475656347959297, '菜单管理', 1412786680213598209, 'el-icon-menu', '/system/menu', 1, NULL, NULL, '2021-07-09 20:30:32', NULL, NULL, '2021-07-09 20:30:32', 1, 0);
INSERT INTO `menu` VALUES (1413481577081995266, '角色管理', 1412786680213598209, 'el-icon-key', '/system/sole', 2, NULL, NULL, '2021-07-09 20:54:03', NULL, NULL, '2021-07-09 21:00:40', 1, 0);
INSERT INTO `menu` VALUES (1413488257782108162, '用户管理', 1412786680213598209, 'el-icon-user', '/system/user', 3, NULL, NULL, '2021-07-09 21:20:36', NULL, NULL, '2021-07-09 21:20:36', 1, 0);


SET FOREIGN_KEY_CHECKS = 1;

7.数据格式

[
  {
    "id": "1412786680213598209",
    "createUser": null,
    "createDept": null,
    "createTime": "2021-07-07 22:52:47",
    "updateUser": null,
    "updateUserName": null,
    "updateTime": "2021-07-07 22:52:47",
    "status": 1,
    "isDeleted": 0,
    "name": "系统设置",
    "path": "/system",
    "parentId": "0",
    "sort": 1,
    "icon": "el-icon-setting",
    "hasChildren": true,
    "children": null
  }