d2-crud-plus树形菜单

最新推荐文章于 2024-08-23 07:50:25 发布

吃范范

最新推荐文章于 2024-08-23 07:50:25 发布

阅读量1.3k

点赞数

分类专栏：代码模块文章标签： vue d2-admin d2-crud-plus 树形菜单

本文链接：https://blog.csdn.net/fanhuiixa/article/details/118191905

版权

本文介绍了如何在d2-admin中利用d2-crud-plus组件创建树形菜单，包括api.js配置、crud.js设置和index.vue的布局，同时详细说明了树形菜单所需的接口返回数据格式。

摘要由CSDN通过智能技术生成

一、api.js

import { request } from '@/api/service'
const apiPrefix = '接口地址'
export function GetList (query) {
  return request({
    url: apiPrefix + '/list',
    method: 'get',
    params: query
  }).then(ret => {
    ret.data = ret.data ? ret.data : {}
    ret.data.current = ret.result.current
    ret.data.size = ret.result.size
    ret.data.total = ret.result.total
    ret.data.records = ret.result.records
    return ret
  })
}
export function AddObj (obj) {
  return request({
    url: apiPrefix + '/add',
    method: 'post',
    data: obj
  })
}

export function UpdateObj (obj) {
  console.log(obj)
  return request({
    url: apiPrefix + '/edit',
    method: 'put',
    data: obj
  })
}

export function DelObj (id) {
  return request({
    url: apiPrefix + '/delete',
    method: 'delete',
    params: { id }
  })
}

export function GetObj (id) {
  return request({
    url: apiPrefix + '/queryById',
    method: 'get',
    params: { id }
  })
}

export function BatchDel (ids) {
  return request({
    url: apiPrefix +'/deleteBatch',
    method: 'delete',
    data: { ids }
  })
}

二、crud.js

import { request } from '@/api/service'
export const crudOptions = (vm) => {
  return {
    rowHandle: {
      width: 230,
      edit: {show:true,text: '编辑'},
      view: {show:true,text: '查看'},
      remove: {show:true,text: '删除'}
    },
    options:{
      height: '100%'
    },
    columns: [
      {
       title: '基本标识',
       key: 'id',
       width: 50,
       sortable: false,
       show:true,
       type: 'int',
       form: {
         disabled: true