greper / d2-crud-plus

面向配置的crud框架，基于d2-admin的d2-crud,简化d2-crud配置，快速开发crud功能；支持远程数据字典，国际手机号校验，alioss、腾讯云cos、七牛云文件上传、头像裁剪，省市区选择，权限管理，代码生成

【d2-crud-plus】面向配置的crud编程

基于d2-admin 的 d2-crud 的扩展,简化d2-crud配置，快速开发crud功能。

警告：不再维护通知

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 停止维护 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
抱歉，由于精力有限，d2-crud-plus将不再维护（不加新功能、不修bug、可能也不再回复问题）。
如果你是新项目，强烈建议直接使用fast-crud
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

fast-crud

支持vue3的fast-crud已发布，开发crud更快、更强、更爽。

文档地址： http://fast-crud.docmirror.cn/
示例地址： antdv版 / element版 / native-ui版
仓库地址： Github / Gitee

注意：fast-crud仅支持vue3，不兼容d2-crud-plus，无法从d2p直接升级到fast-crud

帮助文档

%%%%%%%%%%%%%%%%%%%%%%% 帮助文档 ↓%%%%%%%%%%%%%%%%%%%%%%%%%%%%

GitHub Pages
https://greper.github.io/d2-crud-plus/

码云（国内访问推荐 ）
http://d2-crud-plus.docmirror.cn/d2-crud-plus/

示例演示
http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html

%%%%%%%%%%%%%%%%%%%%%%% 帮助文档 ↑%%%%%%%%%%%%%%%%%%%%%%%%%%%%

特性

1. 简洁至上： 以最少的配置帮助你简化crud开发。
2. 字段类型： 丰富的字段类型，大幅减少代码量。
3. 快： 开发crud，快的不可思议！！！
4. 自定义： 再困难的需求，也能实现。
5. 权限管理： RBAC权限管理示例。
6. 代码生成： 根据数据表生成前后端代码，一气呵成。

面向配置的crud编程

1. 简单的crud配置

开发过程中主要对crud.js进行代码编写

export const crudOptions = (vm)=>{ // vm即this
   return {
     columns: [
       {
         title: '日期',
         key: 'createDate',
         type: 'date', //字段类型为时间选择器datepicker,根据类型可自动生成默认配置
         search: {//查询配置，默认启用查询
           disabled: true //【可选】true禁止查询,默认为false
         },
         form: {//form表单的配置
           disabled: true, //禁止添加输入与修改输入【可选】默认false
         }
       },
       {
         title: '状态',
         key: 'status',
         search: {},//启用查询
         type: 'select', //字段类型为选择框
         form: { //配置添加和编辑，根据form的配置自动生成addTemplate和editTemplate
           rules: [//【可选】添加和修改时的校验规则，不配置则不校验
             { required: true, message: '请选择状态' }
           ]
         },
         dict: { //数据字典配置
           url: '/api/dicts/StatusEnum' //远程获取数据字典
         }
       },
       {
         title: '地区', 
         key: 'province', 
         search: {},//启用查询
         type: 'select', //字段类型为选择框
         form: {
           rules: [{ required: true, message: '请选择地区' }],
           component: { //添加和修改时form表单的组件，支持任何v-model组件
             props: { //配置自定义组件的属性
               filterable: true, //可过滤选择项
               multiple: true, //支持多选
               clearable: true //可清除
             }
           }
         },
         dict: {  //本地数据字典
           data: [
             { value: 'sz', label: '深圳' }, 
             { value: 'gz', label: '广州' }, 
             { value: 'wh', label: '武汉' }, 
             { value: 'sh', label: '上海' }
           ]
         }
       }
     ]
   }
}

2. 一个完全体crud就出来了

3. 现在就去开始吧

• 帮助指南

• 快速开始

帮助文档

%%%%%%%%%%%%%%%%%%%%%%% 帮助文档 ↓%%%%%%%%%%%%%%%%%%%%%%%%%%%%

GitHub Pages
https://greper.github.io/d2-crud-plus/

码云（国内访问推荐 ）
http://d2-crud-plus.docmirror.cn/d2-crud-plus/

示例演示
http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html

%%%%%%%%%%%%%%%%%%%%%%% 帮助文档 ↑%%%%%%%%%%%%%%%%%%%%%%%%%%%%

他们在用

• 甘肃某门票分时预约及数据分析系统
• 表格后台生成 crud配置从后台获取，通过后台配置即可生成crud表格 开源地址
• ji-admin-ui , 配套后端ji-admin
• 还有很多的小伙伴做的是内部管理系统，没法分享出来

联系作者

欢迎bug反馈，需求建议，技术交流等（请备注d2-crud-plus）

赞赏

支持维护，给我打打鸡血,抱拳抱拳

d2-crud-plus's Issues

👾 BUG | 懒加载展开行在展开后就不会重置状态了，无论点搜索还是分页

这个懒加载在展开后，切换分页后或者重新搜索后懒加载展开行状态还是展开的，而element-ui的会重置懒加载状态。
重新点击搜索后懒加载的那一行还是展开状态，必须重新刷新页面。

⚙ 功能升级 | 展示组件将row[key]绑定到指定的参数上，能够支持非vModel的组件

例如el-image在 行展示组件中无法简单的使用，只能通过render

{
component:{
 name:'el-image' // 它是一个非v-model组件，原本是不支持显示row[key]的值的
 valueBinding:'src' // 将row[key]的值绑定到 el-image的 src参数上去
}
}

兼容性存在bug

bug复现：
同时引入d2-crud和x版本
如下main.js

// Vue
import Vue from 'vue'
import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
// store
import store from '@/store/index'

// 菜单和路由设置
import router from './router'
import { frameInRoutes } from '@/router/routes'
import { menuHeader } from '@/menu'
import '@/business'

import {
  d2CrudPlus
} from 'd2-crud-plus'
// 如果需要slot功能，要将d2-crud替换为d2-crud-x【其他与d2-crud一致】
import d2CrudX from 'd2-crud-x'
import d2Crud from '@d2-projects/d2-crud'
import {
  request
} from '@/api/service'
Vue.use(d2CrudX, {name: 'd2-crud-x'}) //注册名称为d2-crud-x ，不传name则使用d2-crud作为标签名称
//  自定义字段类型示例
d2CrudPlus.util.columnResolve.addTypes({
  time2: {
    form: {
      component: {
        name: 'el-date-picker',
        props: {
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss'
        }
      }
    }, // 编辑时支持日期时间
    search: {
      component: {
        props: {
          type: 'date'
        }
      }
    }, // 搜索时只支持日期
    formatter(row, column, value, index) {
      return value
    },
    _handle(column) {
      //  此方法主要将column中某些依赖的用户配置的属性放到默认配置中，比如数据字典的配置
      if (column.dict != null) {
        this.form.component.props.dict = column.dict
        this.component.props.dict = column.dict
      }
    }
  }
})

//添加自定义字段类型
d2CrudPlus.util.columnResolve.addTypes({
  'diytime': {
    form: {
      component: {
        name: 'el-date-picker',
        type: 'datetime',
        props: {
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss'
        }
      }
    },
    component: {
      name: 'date-format',
      props: {
        format: 'yyyy-MM-dd HH:mm:ss',
        valueFormat: 'yyyy-MM-dd HH:mm:ss'
      }
    },
    _handle(column) {

    } // 此方法将在运行时执行。在自定义配置与默认配置合并之后执行

  }
})
Vue.use(d2CrudPlus, {
  //获取数据字典的请求方法
  //可在dict中配置getData方法覆盖此全局方法
  getRemoteDictFunc(url, dict) {
    return request({
      url: url,
      method: 'get'
    }).then(ret => {
      return ret.data //返回字典数组
    })
  },

  commonOption() { //d2-crud option 全局设置，可以不用配置
    return {
      format: {
        page: { // page接口返回的数据结构配置，
          request: { // 请求参数
            current: 'current', //当前
            size: 'size'
          },
          response: { //返回结果
            current: 'current', // 当前页码 ret.data.current
            size: 'size', // 每页条数，ret.data.size, 
            //size: (data) => { return data.size }, //你也可以配置一个方法，自定义返回
            total: 'total', // 总记录数 ret.data.total
            records: 'records' // 列表数组 ret.data.records
          },
          options: {
            size: 'mini'
          } //全局配置表格大小
        }
      },
      formOptions: {
        defaultSpan: 12 // 默认的表单 span
      },
      options: {
        height: '100%' // 表格高度100%, 使用toolbar必须设置
      },
      pageOptions: {
        compact: false // 是否紧凑型页面
      },
      viewOptions: {
        disabled: false // 开启查看按钮
      }
    }
  }
})
// 核心插件
Vue.use(d2Admin)

Vue.use(d2Crud)
new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
  created () {
    // 处理路由 得到每一级的路由设置
    this.$store.commit('d2admin/page/init', frameInRoutes)
    // 设置顶栏菜单
    this.$store.commit('d2admin/menu/headerSet', menuHeader)
    // // 设置侧边栏菜单
    this.$store.commit('d2admin/menu/asideSet', menuHeader[2].children)
    // 初始化菜单搜索功能
    this.$store.commit('d2admin/search/init', menuHeader)
  },
  mounted () {
    // 展示系统信息
    this.$store.commit('d2admin/releases/versionShow')
    // 用户登录后从数据库加载一系列的设置
    this.$store.dispatch('d2admin/account/load')
    // 获取并记录用户 UA
    this.$store.commit('d2admin/ua/get')
    // 初始化全屏监听
    this.$store.dispatch('d2admin/fullscreen/listen')
  },
  watch: {
    // 检测路由变化切换侧边栏内容
    '$route.matched': {
      handler (matched) {
        if (matched.length > 0) {
          console.log('_side:', menuHeader, matched)
          const _side = menuHeader.filter(menu => menu.path === matched[0].path)
          if (_side.length > 0) {
            this.$store.commit('d2admin/menu/asideSet', _side[0].children)
          }
        }
      },
      immediate: true
    }
  }
}).$mount('#app')

出现截图的问题

复杂表头时columns没有生成正确的editTemplate

chidren节点需要深度遍历

  const columns= [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '配送信息',
          children: [
            {
              title: '姓名',
              key: 'name'
            },
            {
              title: '地址',
              children: [
                {
                  title: '省份',
                  key: 'province'
                },
                {
                  title: '市区',
                  key: 'city'
                },
                {
                  title: '地址',
                  key: 'address'
                }
              ]
            }
          ]
        }
      ]

Failed to resolve directive: permission，数据库有权限代码，已经获取接口。请问什么地方有问题，大佬？

搞了好久，没啥思路。麻烦指点一下。

动态加载菜单的问题或者是bug？

main.js?56d7:137 _side: [Object, Object, Object, Object, Object, ob: Observer] [Obj

ect, Object]

浏览器错误见图片

文字提示：【加载动态路由失败 TypeError: Cannot read property 'map' of undefined】

相关代码如下：

import { uniqueId } from 'lodash'
import header from '@/menu/header'
import aside from '@/menu/aside'
/**
 * @description 给菜单数据补充上 path 字段
 * @description https://github.com/d2-projects/d2-admin/issues/209
 * @param {Array} menu 原始的菜单数据
 */
export function supplementPath(menu) {
  //debugger
  return menu.map(e => ({
    ...e,
    path: e.menuPath || uniqueId('d2-menu-empty-'),
    ...e.children ? {
      children: supplementPath(e.children)
    } : {}
  }))
}

export const menuHeader = supplementPath(header)

export const menuAside = supplementPath(aside)

import constantRoutes, { frameInRoutes } from '@/router/routes'
import StringUtils from '@/business/utils/util.string'
import layoutHeaderAside from '@/layout/header-aside'
import { menuHeader, supplementPath } from '@/menu'
const StatciMenuHeader = [...menuHeader]
/**
 * menuType 1=menu 2=btn 3=route
 * @param routers
 * @param list
 * @returns {[]}
 */
function formatRouter (parent, list) {
  if (parent == null) {
    parent = { children: [] }
  }
  //debugger;
  list.forEach((item) => {
    let newRouter = parent
    if (item.type !== 'button' && !StringUtils.isEmpty(item.menuPath)) { // 如果是按钮 或者没有配置component，则不加入路由
      let menuPath = null
      if (item.menuPath === 'layoutHeaderAside') {
        menuPath = layoutHeaderAside
      } else {
        menuPath = () => import('@/business/modules' + item.menuPath)
      }
      const children = parent.children
      newRouter = {
        path: item.menuPath,
        name: item.menuName,
        hidden: false,
        // 动态路由支持懒加载
        component: menuPath,
        meta: {
          title: item.menuName,
          auth: true,
          cache: true
        }
      }
      children.push(newRouter)
    }
   // if (item.children != null && item.children.length > 0) {
if (item.children != null && item.children.length > 0) {
      if (newRouter.children == null) {
        newRouter.children = []
      }
      formatRouter(newRouter, item.children)
    }
  })

  return parent.children
}

function formatMenu (menuTree) {
  if (menuTree == null) {
    menuTree = []
  }
  let menus = []
  menuTree.forEach((item) => {
    if (item.type !== 'menu') { // 只有菜单类型才加入
      return
    }
    let children
    if (item.children != null && item.children.length > 0) {
      children = formatMenu(item.children)
    }
    // let icon
    // if (item.icon != null && item.icon !== '') {
    //   icon = item.icon
    // }
    menus.push({ path: item.menuPath, title: item.menuName, children: children })
  })
  if (menus.length === 0) {
    menus = undefined
  }
  return menus
}

function formatPermissions (menuTree, permissionList) {
  if (menuTree == null) {
    menuTree = []
  }
  menuTree.forEach((item) => {
    if (item.menuAuth != null && item.menuAuth !== '') { // 权限为空
      permissionList.push(item.menuAuth)
    }
    if (item.children != null && item.children.length > 0) {
      formatPermissions(item.children, permissionList)
    }
  })
  return permissionList
}

// export function buildRoutes (routes) {
//   return [{
//     path: '/',
//     redirect: { name: 'index' },
//     component: layoutHeaderAside,
//     children: routes
//   }]
// }

const state = {
  routes: [],
  addRoutes: [],
  permissions: [],
  inited: false
}

const mutations = {
  SET_ROUTES: (state, { accessedRoutes: routes, permissions }) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
    state.inited = true
    state.permissions = permissions
  },
  clear: () => {
    state.addRoutes = []
    state.routes = []
    state.inited = false
    state.permissions = []
  }
}

const actions = {
  generateRoutes ({ commit }, { menuTree }) {
    return new Promise(resolve => {
      const accessedRoutes = formatRouter(null, menuTree)
      const permissions = formatPermissions(menuTree, [])
      console.log('permission Routers', accessedRoutes)
      commit('SET_ROUTES', { accessedRoutes, permissions })

      const menus = supplementPath(formatMenu(menuTree))
      menuHeader.splice(0, menuHeader.length)
      menuHeader.push(...StatciMenuHeader)
      menuHeader.push(...menus)
      console.log('accessRouter:', accessedRoutes)

      // 处理路由 得到每一级的路由设置
      commit('d2admin/page/init', frameInRoutes.concat(accessedRoutes), { root: true })
      // 设置顶栏菜单
      commit('d2admin/menu/headerSet', menuHeader, { root: true })
      // // 设置侧边栏菜单
      // commit('d2admin/menu/asideSet', allMenuAside, { root: true })
      // 初始化菜单搜索功能
      commit('d2admin/search/init', menuHeader, { root: true })

      resolve(accessedRoutes)
    })
  },
  clear ({ commit }) {
    commit('clear')
  }
}

const getters = {
  inited (state) {
    return state.inited
  },
  permissions (state) {
    return state.permissions
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

显示优化 | 嵌套表格首次加载刷新页面

示例中嵌套表格首次打开，点击嵌套表格删除按钮后页面会刷新，后续操作才可以正常，当新开窗口 首次又会刷新页面。

BUG | d2-crud-plus独立使用，不依赖d2-admin项目的时候出现问题

不知道这是不是bug，寻求解决方案.

背景：vue-admin-temlate +d2-crud-plus进行整合
原因：历史项目使用的是vue-admin-template框架，非d2-admin，新的页面想用d2-crud-plus
bug：展现功能正常，在页面加载的时候一直报错，如下，请问如何解决这个错误，百度查询属于d2-admin的组件，但是不想依赖d2-admin，不影响crud-plus插件使用，但是报错挺闹心的，浏览器错误信息如下：

vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: <d2-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TestPage> at src/views/sys/user/index.vue
       <AppMain> at src/layout/components/AppMain.vue
         <Layout> at src/layout/index.vue
           <App> at src/App.vue
             <Root>

请教： 高耦合问题：<!-- <platform-selector size="small" @init="platformInit"></platform-selector> -->

大佬，您好。抱歉打扰

这句话不嫩注释额，注释后相关的compents也注释了，但是依旧无法显示，放开注释一切正常。
请问还有其他的特殊处理吗？还是说就是没删除干净而已。

其它问题 | 如何固定表格的操作列？

看了example里面的用法没找到我要的效果，假如我的表中最后一列用showRemoveButton等参数显示了操作列，当列太多的时候怎么固定呀？
麻烦作者回复一下

功能开发 | 新增前端分页搜索功能

当对于后端列表数据构造复杂（比如搜索某个字段时，可能需要关联多个表才能查询到结果），且数据在可预测的有限条数的时候，前端可以一次性获取全部数据，然后在前端分页，搜索字段等操作。

d2-crud-x数据加载问题旧版可以，新版不显示

新版未找到如何加载数据，文档上面好像也没有，list数据无法加载列表中额，大佬
d2-crud-x数据加载问题旧版可以，新版不显示

旧版：

<!-- <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" ></crud-search>
    <d2-crud
        ref="d2Crud"
        :columns="crud.columns"
        :data="crud.list"
        :rowHandle="crud.rowHandle"
        edit-title="修改"
        :add-template="crud.addTemplate"
        :add-rules="crud.addRules"
        :edit-template="crud.editTemplate"
        :edit-rules="crud.editRules"
        :form-options="crud.formOptions"
        :options="crud.options"
        :loading="crud.loading"
        highlightCurrentRow
        selection-row
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
        @dialog-open="handleDialogOpen"
        @row-edit="handleRowEdit"
        @row-add="handleRowAdd"
        @row-remove="handleRowRemove"
        @dialog-cancel="handleDialogCancel"
        @form-data-change="handleFormDataChange">
      <el-button slot="header" class="d2-mb-5" size="small" type="primary" @click="addRow">新增</el-button>
    </d2-crud>
    <crud-footer ref="footer"
                  :current="crud.page.current"
                  :size="crud.page.size"
                  :total="crud.page.total"
                  @change="handlePaginationChange"
    >
    </crud-footer> -->

新版：

  <d2-crud-x
                ref="d2Crud"
                v-bind="_crudProps"
                v-on="_crudListeners">

          <div slot="header">
            <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />

            <el-button slot="header"  v-permission="'yun:user:add'" size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>

            <crud-toolbar :search.sync="crud.searchOptions.show"
                          :compact.sync="crud.pageOptions.compact"
                          :columns="crud.columns"
                          @refresh="doRefresh()"
                          @columns-filter-changed="handleColumnsFilterChanged"/>
          </div>

        </d2-crud-x>

🔩 功能开发 | 支持富文本的v-html显示

颜色设定或者标签的类型设置

设置样式：http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/demo/form/toolbar
如图的怎么设置tag的类型，目前都是蓝色的，默认的，例如有的判断如果name=admin红色，其他的蓝色

请问大佬如何设置，没找到api，抱歉再次打扰您。

🤔 提问 | 引用页面问题，存在使用困惑

情况是这样的。不同的tab，切换不同的表格（表格的头和内容均不同），没有做成统一的compents，请问在tab切换的时候如何引用，从而达到，不同的tab切换不同的表格的效果。

例如：https://element.eleme.cn/#/zh-CN/component/tabs

其中上面例子中【配置管理】的表格和【配置管理】的表格字段，内容完全不同

麻烦把最新版的例子更新上github上哈，在线等，预览地址的代码没有更新上

麻烦把最新版的例子更新上github上哈，在线等

示例相关 | 兼容性问题，多框架兼容

1、d2-crud-plus在d2-admin中运行无问题，请问目前d2-crud-plus是否可以单独使用？
2、例如配合：https://github.com/PanJiaChen/vue-element-admin进行插件融合使用。

提问 | 文件上传返回500报错Uncaught TypeError: option.onError is not a function

上传返回500报错Uncaught TypeError: option.onError is not a function，但是页面文件显示100%

更新问题

1个月之前用了大佬的框架，随着大佬的功能越发的强大。
请问，现在要用新功能的话，是不是得重新来一遍，还是说重新npm即可，能兼容升级
感谢大佬

功能升级 | initColumns 初始化数据

在多次call _doStart() 的情况下，table 和 crudOptions.columns 的数据都是完好的，但是 Search / addTemplate / editTemplate / viewTemplate 都出现了重复key+item的现象。

建议在 initColumns 里面进行更全面的初始化，例如 crud.viewTemplate = []

无法找到 d2-crud-plus@^1.15.0

复现过程：package.json变成最新的package.json执行安装时候报错。无法找到 d2-crud-plus@^1.15.0
npm cnpm 和原版的npm都试过额

PS F:\gitee_vue\c_vue> npm install
npm ERR! code ETARGET
npm ERR! notarget No matching version found for d2-crud-plus@^1.15.0
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'crm_vue'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Win.Zhu\AppData\Roaming\npm-cache\_logs\2020-08-06T08_53_25_839Z-debug.log
PS F:\gitee_vue\c_vue> npm install --registry  http://registry.npmjs.org
终止批处理操作吗(Y/N)? Y
PS F:\gitee_vue\crm_vue>
PS F:\gitee_vue\crm_vue>
PS F:\gitee_vue\crm_vue> npm install --registry  http://registry.npmjs.org
[ .................] \ fetchMetadata: sill fetchPackageMetaData error for @d2-projects/[email protected] 404 Not Found - GET http://registry.npmjs.org/@d2-projects/d2-crud/-/d2-crud-2.0.5.tgz

bug，重复请求bug

项目查询时候，发现了重复请求

复现地址：http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/permission/platform

复现步骤： 搜索框输入 admin，迅速的按下查询按钮

看谷歌浏览器的控制台

两条请求记录

弹框请教

用element UI组件， dialog 父子组件问题，如下
请问input框中如何添加图中的【添加】二字，便于触发新的子弹框

BUG | IE兼容

现在一些企业，还是存在，尤其领导的电脑使用IE的情况，使用过程中发现如下问题：

兼容问题：不能兼容IE类浏览器，目前测试的IE11 ，win10
复现地址：http://qiniu.veryreader.com/D2CrudPlusExample/index.html

字段配置中 对象类型应该如何处理

您好 请教个问题
例如：
{
title: '机构',
key: 'sysOrg.orgName',
sortable: true,
search: {},
type: 'select',
dict: {
url: '/platform/getOrgList'
},
view: { // 查看时的该字段单独配置
component: { span: 18 }
}
},

这样配置会报

错误信息 >>>>>>
index.js?ac5b:21 mounted hook
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 Error: please transfer a valid prop path to form item!
at getPropByPath (util.js?8122:86)
at VueComponent.fieldValue (element-ui.common.js?5c96:23440)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
at VueComponent.computedGetter [as fieldValue] (vue.runtime.esm.js?2b0e:4836)
at VueComponent.mounted (element-ui.common.js?5c96:23602)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)

请问对象中的属性 应该如何配置？
谢谢

🔩 功能开发 | 嵌套表格

其它问题 | 动态修改字典数据

你好，我需要动态修改表单中 select 组件的数据，
字典配置 data 属性一些默认数据，然后根据点击列表来修改字典，
添加一些内容，发现没法重新加载配置。

显示优化 | crud-toolbar 的文字显示

crud-toolbar 里面的列设置做得很棒，可是不支持多语言。
建议多使用 prop 传入 text 方便控制标题及按钮的文字显示。

示例相关 | 新增按钮和查询按钮相关

请问：新增按钮和查询按钮相关，非每一行后面的新增
如何把每个页面的新增的颜色或者内容，如“”新增“”变成“”添加“”两个字 ，同时变成thin
请问在哪里配置，配置如下无效：

 add: {
        thin: true,
        text: null,
          type: 'info'
          },

动态联动网页或者表格

大佬搞一个这种，感谢这种的场景挺多的哈，供参考：

https://preview.pro.antdv.com/account/settings/base
（用户名密码均为admin）
左侧点击，切换右边

[需求]form表单独立使用

其他问题|d2-crud-plus-example下的路由modules怎么使用

其它问题 | d2-crud-plus-example下的路由modules怎么使用

https://github.com/greper/d2-crud-plus/tree/master/packages/d2-crud-plus-example/src/router/modules下对应的view在哪儿？

select设置默认值

select通过dict的url获取数据时，设置默认值为其中的某一项，展示时默认值被选中

🤔 提问 | 每次请求之后，可以不可不更新pageSize

后端不返回每页个数
如果用返回数量（records.length）作为pageSize，加了查询条件之后 重置 pageSize不重制。

BUG | 有关初始化（或加载数据）从created推迟到mounted

• 文档似乎有错误，应该是 _OnCreated() 和 _doStart()。已经测试了，是运行次序可行的。
• 但是使用 vex-table的话，会出现 [vxe-table] 参数 "column.label" 已废弃，请使用 "column.title"。
• 如果切换 el-table，依然会出现错误。查询的区域无法显示。

其他问题 | crudOptions 的 columns

是否有可能从服务端传来 columns 的数据，然后再重新布局 table 的title？

显示优化 | 字典容易泄露ID或者用户体验二次加载感觉问题，供参考

复现地址：
http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/usersphere/user

问题描述：
由于网络的波动，刷新带有select的字典页面，容易先看到ID，稍后看到ID对应的汉字。
如果网络刚好卡住，ID容易泄露或者不美观，用户有一种二次加载的感觉，不知道能否修复。供参考。

👾 BUG | 嵌套表格的bug，设计vm参数

能显示出来的写法：
export const crudOptions = {}

不能显示出来，但是需要使用的写法：

export const crudOptions = (vm) => {
  return {
    options: {
        height: '100%' // 表格高度100%, 使用toolbar必须设置
      },
}

因为涉及到自定义如下：

 form: {
        component: {
          name: 'el-input',
          children: [
            (h) => {
              return <el-button slot="append" icon="el-icon-search" onClick={() => { vm.isSearch() }}/>
            }
          ]
        }
      }

如果不写vm能显示，但是无form自定义功能，如果写vm，显示不出来表格

>>>>>> 错误信息 >>>>>>
index.js?ac5b:21 created hook
util.log.js?3dbf:39 >>>>>> Vue 实例 >>>>>>
index.js?ac5b:23 VueComponent
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at crud_createForOfIteratorHelper (d2-crud-plus.umd.js?1fbf:11828)
    at VueComponent.initColumns (d2-crud-plus.umd.js?1fbf:12061)
    at VueComponent._doStart (d2-crud-plus.umd.js?1fbf:12039)
    at VueComponent._OnCreated (d2-crud-plus.umd.js?1fbf:11507)
    at VueComponent.created (d2-crud-plus.umd.js?1fbf:11977)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5008)
    at new VueComponent (vue.runtime.esm.js?2b0e:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
:9000/#/rest/crmWork/list:1 A cookie associated with a cross-site resource at http://localhost/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
util.log.js?3dbf:27  D2Admin  ErrorHandler 
util.log.js?3dbf:39 >>>>>> 错误信息 >>>>>>
index.js?ac5b:21 created hook
util.log.js?3dbf:39 >>>>>> Vue 实例 >>>>>>
index.js?ac5b:23 VueComponent
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at crud_createForOfIteratorHelper (d2-crud-plus.umd.js?1fbf:11828)
    at VueComponent.initColumns (d2-crud-plus.umd.js?1fbf:12061)
    at VueComponent._doStart (d2-crud-plus.umd.js?1fbf:12039)
    at VueComponent._OnCreated (d2-crud-plus.umd.js?1fbf:11507)
    at VueComponent.created (d2-crud-plus.umd.js?1fbf:11977)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5008)
    at new VueComponent (vue.runtime.esm.js?2b0e:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
util.log.js?3dbf:27  D2Admin  ErrorHandler 
util.log.js?3dbf:39 >>>>>> 错误信息 >>>>>>
index.js?ac5b:21 created hook
util.log.js?3dbf:39 >>>>>> Vue 实例 >>>>>>
index.js?ac5b:23 VueComponent
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at crud_createForOfIteratorHelper (d2-crud-plus.umd.js?1fbf:11828)
    at VueComponent.initColumns (d2-crud-plus.umd.js?1fbf:12061)
    at VueComponent._doStart (d2-crud-plus.umd.js?1fbf:12039)
    at VueComponent._OnCreated (d2-crud-plus.umd.js?1fbf:11507)
    at VueComponent.created (d2-crud-plus.umd.js?1fbf:11977)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5008)
    at new VueComponent (vue.runtime.esm.js?2b0e:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)

search 查询框无排序

search 查询框无法自定义排序，希望能加对查询组件添加自定义排序

👾 BUG |登录的时候cookie中有token，但是该token访问后端的话属于token过期的场景，没有跳转到登录页面

👾 BUG |登录的时候cookie中有token，但是该token访问后端的话属于token过期的场景，没有跳转到登录页面，下面这种情况应该跳转到login，重新登录的，请问该bug如何验证token的有效性，请提供思路大佬，跪谢、

{msg: "Token已经过期，请重新登录或者联系管理员！", status: 401, success: false}
msg: "Token已经过期，请重新登录或者联系管理员！"
status: 401
success: false

如下面代码

// 验证当前路由所有的匹配中是否需要有登录验证的
  if (to.matched.some(r => r.meta.auth)) {
    // 这里暂时将cookie里是否存有token作为验证是否登录的条件
    // 请根据自身业务需要修改
    const token = util.cookies.get('token')
    if (token && token !== 'undefined') {
      next()
    } else {
      // 没有登录的时候跳转到登录界面
      // 携带上登陆成功之后需要跳转的页面完整路径
      next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
      // https://github.com/d2-projects/d2-admin/issues/138
      NProgress.done()
    }
  } else {
    // 不需要身份校验 直接通过
    next()
  }

组件bug：列表字典生效，但是新增和更新的时候失效

如题：

配置如下：
crud.js

   {
      title: '角色',
      key: 'roleId',
      search: {
        disabled: true //【可选】true禁止查询,默认为false
      }, 
      type: 'select', //字段类型为选择框
      form: { //配置添加和编辑，根据form的配置自动生成addTemplate和editTemplate
        rules: [ //【可选】添加和修改时的校验规则，不配置则不校验
          {
            required: true,
            message: '请选择角色'
          }
        ]
      },
      dict: {
        // 这里配置远程获取字典数据的请求地址
        url: 'rest/role/commonList',
        value: 'id', // 数据字典中value字段的属性名
        label: 'roleLabel' // 数据字典中label字段的属性名
      }

    }

功能升级 | dict缓存支持页面级别

能不能实现表格的折叠功能expand，在普通版本没发现列的扩展组件的点击事件，这个看到了不错

⚙ 功能升级 | 支持默认值

使用官方示例请求后台接口报错

数据:{
"code": 0,
"msg": null,
"data": {
"records": [
{
"id": "fd6138ed867b9fd38faa891725754e27",
"createBy": "string",
"createTime": "2020-04-28 09:16:26",
"updateBy": "string",
"updateTime": null,
"delFlag": 0,
"username": "22222222222222",
"password": "string",
"nickName": "string",
"phone": "string",
"email": "string",
"address": "string",
"sex": "1",
"passStrength": "1",
"avatar": "string",
"type": 0,
"status": 0,
"description": "string",
"deptId": "string",
"deptName": null,
"roles": null,
"roleKeys": null
}
],
"total": 1,
"size": 10,
"current": 1,
"orders": [],
"hitCount": false,
"searchCount": true,
"pages": 1
}
}

错误：

显示优化 | 查询界面优化和主题问题

您好：是这样的，由于历史系统主题统一问题，需要将所有的按钮默认颜色变为plain的效果，请问：
1）查询按钮如何更改颜色和添加plain，这个和新增不同，属于已经封装了的，没找到更改入口，参考plian样式：https://element.eleme.cn/#/zh-CN/component/button

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

2）查询状态栏，默认是展开的，点击toolbar可以隐藏，问题是：如何默认隐藏，点击toolbar可以展开？
再次感谢您的耐心指导，大佬辛苦。

建议把权限的部分放出来，前台和后台可以联动起来

建议把前端权限的部分放出来，前台和后台可以联动起来

大佬：d2admin请求的dict远程没有问题，但是用d2-curd-plus-example有问题，报请求地址出错: role/getRoleList

远程字典地址格式如下：

dict: {
// 这里配置远程获取字典数据的请求地址
url: '/role/getRoleList',
value: 'id', // 数据字典中value字段的属性名
label: 'roleName' // 数据字典中label字段的属性名
}

懒加载示例

需要一个四级地址懒加载示例

⚙ 功能升级 | 操作列按钮排序