d2-crud-plus

# 版本变更说明

# 2.13.0

1、行编辑高级版
2、编辑对话框可配置抽屉模式
3、优化编辑对话框打开时的动画效果
4、检测修改提醒保存

# 2.12.3

1、增加options.events配置，支持更多el-table的事件监听
2、修复el-phone-number-input无法disabled的问题
3、修复列设置没有滚动条的问题
4、修复推迟到mounted初始化时，search报错的bug
5、dict 增加transfer配置，可以获取到字典后做一些修改
6、toolbar的refresh配置false可以隐藏按钮
7、服务端排序支持
8、头像上传增加loading
9、buildKey参数中可以获取file

# 2.12.0 统一所有子项目版本，无重大改变

  1. 增强search的v-bind属性，可能会将form中配置的属性也绑定到search上，注意修改旧版本

# 1.16.6 数据导出

  • d2p-extends@1.9.16
  • d2-crud-plus@1.16.6
  • d2-crud-x@2.10.5

# 1.16.5 查询字段支持排序

  • d2p-extends@1.9.14
  • d2-crud-plus@1.16.5
  • d2-crud-x@2.10.4
  1. 查询字段支持排序，设置search:{order: 1}，数字越小越靠前
  2. example 权限模块进行优化，取消hook耦合，删除平台管理功能，给小伙伴们一个最最简单的权限模块。

# 1.16.3 点号key多级数据支持

  • "d2-crud-plus": "^1.16.3"
  • "d2-crud-x": "^2.10.x"
  • "d2p-extends": "^1.9.x"

# 点号key多级数据支持

不需要扁平化数据了，配置key:'user.name' 即可直接支持多级数据

# 1.16.x 自动化测试、操作列按钮排序

  • "d2-crud-plus": "^1.16.x"
  • "d2-crud-x": "^2.9.x"
  • "d2p-extends": "^1.9.7"

# 操作列按钮排序

rowHandler:{
    view:{
        order:1 // 越小越靠前，默认view=1,edit=2,remove=3,custom=4
    }
}

# valueBinding参数

component:{
    //如果是非vModel组件，则没有value属性，此处配置参数名，将row[key]绑定给指定prop
    valueBinding:'propName', 
}

# 1.15.x 多级数据支持

  • "d2-crud-plus": "^1.15.x"
  • "d2-crud-x": "^2.8.x"
  • "d2p-extends": "^1.9.x"

# 多级数据支持

数据扁平化配置

records=[{
  user:{name:'小明',gender:1}
}]

# show disabled readonly 方法参数

组件的show disabled readonly 属性传入方法时，支持获取form等上下文参数

columns=[
    {
      component:{
        disabled(context){
          return context.form.xxx===0
        }
      }
    }
]

# 1.14.x 查看按钮

  • "d2-crud-plus": "^1.14.x"
  • "d2-crud-x": "^2.7.x"

# 查看按钮

crudOptions={
    viewOptions:{
        disabled: false, // 开启view按钮，默认关闭
        componentType: 'form' //使用哪种组件展示【form=使用表单组件（默认）,row=使用行展示组件】
    },
    rowHandle:{
        view:{} //查看按钮样式配置
    },
    columns:[
       {
         key:'xx',
         title:'xx',
         view:{} //view组件单独配置
       }
    ]
}

传入参数配置

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

<!-- 或者旧版基础上增加参数 -->
<d2-crud-x :viewTemplate="crud.viewTemplate" />

# 1.13.x 联动功能优化

  • "d2-crud-plus": "^1.13.x"
  • "d2-crud-x": "^2.6.x"

# 变更

  1. 实验性支持vxe-table
    vxe-table 性能还不错

  2. valueChange增强

{
  form: {
      /**
       *  valueChange 功能增强
       *  key
       *  value 当前选择的值
       *  form 当前表单
       *  getColumn 获取字段配置的方法，getColumn(keyName) 返回keyName的字段配置，可以动态修改组件配置
       *  mode 当前模式:【add、edit、search】
       *  component 当前组件的ref
       *  immediate 是否是对话框打开后立即触发的
       *  getComponent 获取组件Ref的方法， getComponent(keyName), 返回组件ref，可以动态调用该组件的方法
       */
      valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
      },
      valueChangeImmediate: false // 是否在编辑框打开后立即触发一次valueChange方法
  }
}
  1. dict-x组件支持dict.url变更触发加载字典数据,支持重新加载字典数据
valueChange(key,value,form,{getColumn,component}){
    getColumn('selectKey').component.props.dict.url = '/dict/url' //触发更新字典数据
    component.reloadDict() // 直接触发更新字典数据
    component.clearDict() // 直接清除字典数据及选项
}
  1. 【break change】 dict.url() 改为返回一个url dict.url 支持动态构建
{
    dict: {
      // url 传入一个方法时，返回一个url，将会以此url获取字典项
      url (dict, { form , component /* 当前的组件ref */ }) {
        if (form && form.province != null) { 
          return '/linkage/city?province=' + form.province
        }
        return undefined // 返回undefined 将不加载字典
      }
    }
}
  1. 记住每页条数 用户选择过每页条数后，将会保存在localStorage
const crudOptions = {
    pagination:{ 
        storage: true // true=默认开启， false=关闭，string=保存时的key后缀
    }
}
  1. 记住列设置 列设置会保存在localStorage
//storage配置同上
<crud-toolbar :storage='true'/>
  1. d2-crud-x 属性和事件配置简化
<d2-crud-x
    ref="d2Crud"
    v-bind="_crudProps"
    v-on="_crudListeners"
></d2-crud-x>

# 1.12.x 新版页面（带toolbar）

  • "d2-crud-plus": "^1.12.x"
  • "d2-crud-x": "^2.5.x"
  • "d2p-extends": "^1.7.x"

本次更新完全向下兼容，旧版页面 (opens new window) 升级后不受影响
如果旧版本页面需要升级到新版本页面，请点击新版页面示例 (opens new window)页面的帮助按钮，查看升级方法

← 常见问题 →