FastCrud

Appearance

crudOptions.columns ​

  • 说明：字段复合配置
  • 类型：Object:{[字段key]:Object}
  • 示例：
js
const crudOptions = {
    columns:{
        key:{ //字段key
            title: '字段名',
            type: 'text'
        },
        'user.name':{ //数据支持多级结构 row={key:xx,user:{name:xxx}}
            title: '用户名称',
            type: 'text'
        }
    }
}

[key].title ​

  • 说明：字段名称
  • 类型：String

可以通过如下配置在不同的位置覆盖这里配置的字段名称

js
const crudOptions = {
    columns:{
        testKey:{
            title: "字段名",
            form:{ //会覆盖 testKey.title
                title:"显示在表单上的字段名"
            },
            addForm:{ //会覆盖form.title
                title:"显示在添加表单上的字段名"
            },
            viewForm:{//会覆盖form.title
                title:"显示在查看表单上的字段名"
            },
            editForm:{//会覆盖form.title
                title:"显示在编辑表单上的字段名"
            },
            search:{//会覆盖form.title
                title:"显示在查询框上的字段名"
            },
            column:{//会覆盖testKey.title
                title:"显示在列上的字段名"
            }
        }
    }
}

[key].type ​

  • 说明：字段类型，初始化时，将会使用type代表的字段配置与用户的配置合并。
  • 类型：String

更多帮助，请参考字段类型

TIP

  • type功能通过 字段merge插件 来实现的
  • 字段merge插件 可以用来简化字段配置，提高复用性，减少重复代码。
  • 去学习字段merge插件

[key].dict ​

  • 说明：字段字典分发，运行时字典实例将分别传递给column/form/search的组件的dict参数中
  • 类型：Dict对象

TIP

  • dict分发功能也是通过 字段merge插件 来实现的
  • 字段merge插件 可以用来简化字段配置，提高复用性，减少重复代码。
  • 去学习字段merge插件

[key].valueBuilder与valueResolve ​

  • 说明： 后台值与前端值不一致时解决方案
  • 场景1： 比如图片展示组件和图片上传组件的value为数组类型，但是提交到后台需要的是逗号分割的字符串
  • 场景2： 又或者省市区级联选择：后台返回的数据是province、city、county三个字段，而前端则需要将这三个字段组成一个数组，传给级联组件。
js
columns:{
    key:{
        valueBuilder(context:ValueBuilderContext){
            //value构建，就是把后台传过来的值转化为前端组件所需要的值
            //在pageRequest之后执行转化，然后将转化后的数据放到table里面显示
            context.row.imageUrl = context.row.imageUrl?.split(',')
            //  ↑↑↑↑↑ 注意这里是row，不是form
        }, 
        valueResolve(context:ValueBuilderContext){
            //value解析，就是把组件的值转化为后台所需要的值
            //在form表单点击保存按钮后，提交到后台之前执行转化
            context.form.imageUrl = context.form.imageUrl?.join(',')
            //  ↑↑↑↑↑ 注意这里是form，不是row
        }, 
        form:{
            //有时候，行展示组件的值与form表单所需要的值也是不一样的
            valueBuilder(context){
                //如果配置在form下，则表示将行数据的值转化为表单组件所需要的值 
                //在点击编辑按钮之后，弹出表单对话框之前执行转化。
                
                //以下示例为，后台返回的数据的roles带了roleName和id
                // 但在表单编辑时，组件所需要的value值为roles =[1]，所以需要将value转化为id数组
                // context.form.roles = [{roleId:1,roleName:'管理员'}]
                context.form.roles = context.form.roles.map(item=>item.roleId)
                //  ↑↑↑↑↑ 注意这里是form，不是row
            }, 
            valueResolve(context){
                //与builder相反，提交表单时，需要将value值转换为后台所需要的格式提交给后台
            },
        }
    }
}

[key].column ​

json
{//crudOptions
    columns: {
        key: {
            column: {
                // 此处支持el-table-column / a-table-column的配置
                component: {
                  //此处为单元格组件的配置
                }
            }    
        }
    }
}

[key].form ​

json
{ // crudOptions.columns
  key: { //字段key
    form: {
      title: '字段在表单里的label',
      component: {}, //组件配置
      rules: [], //校验规则
      col: {span: 12} //分栏配置
      //此处支持更多 el-form-item / a-form-item的配置
    } 
  }
}

[key].addForm ​

  • 说明：该字段在添加表单里面的配置
  • 类型：FormProps
  • 配置同[key].form

初始化时会与[key].form合并，然后放入crudOptions.addForm.columns[key]

[key].viewForm ​

  • 说明：该字段在查看表单里面的配置
  • 类型：FormProps
  • 配置同[key].form

初始化时会与[key].form合并，然后放入crudOptions.viewForm.columns[key]

[key].editForm ​

  • 说明：该字段在编辑表单里面的配置
  • 类型：FormProps
  • 配置同[key].form

初始化时会与[key].form合并，然后放入crudOptions.editForm.columns[key]

初始化时会与[key].form合并，然后放入crudOptions.search.columns[key]