Skip to content

crudOptions.columns[key].column

  • 说明:该字段的列配置
  • 类型:Object
  • 示例:
json
{//crudOptions
    columns: {
        key: {
            column: {
                // 此处支持el-table-column / a-table-column的配置
                component: {
                  //此处为单元格组件的配置
                }
            }    
        }
    }
}

[key].column.[x-table-column配置]

  • 说明:column下支持对应ui的table-column组件配置, el-table-column / a-table-column /n-table-column 的全部配置
  • 文档: el-table-column | a-table-column
  • 示例:
js
{ //crudOptions
    columns:{
       key:{
            column:{
                width: 200, //列宽
                minWidth: 100 //最小列宽
                align:'center', //对齐方式
                fixed: 'left' //固定列
            }
       }
    }   
}

[key].column.valueChange

  • 说明: 值变化触发
  • 类型:(context)=>void
  • 示例:
js
crudOptions = { //
    columns:{
        key:{
            column:{
                valueChange(context:ValueChangeContext){
                    console.log('value:',context.value, " row:",context.row)
                }
            }
    }
}

[key].column.component

  • 说明:单元格组件配置
  • 类型:Object 参考组件配置component

[key].column.columnSetDisabled

  • 说明:在列设置中禁用该字段的勾选
  • 类型:Boolean

[key].column.columnSetShow

  • 说明:在列设置中显示该字段的勾选
  • 类型:Boolean

[key].column.show

  • 说明:是否显示该列,列设置中也是通过修改此字段来进行列的显示。
  • 类型:boolean
  • 默认值: true

[key].column.formatter

  • 说明:格式化显示,此参数与antdv、element的原始属性名重叠,非特殊列以此为准。
  • 类型:Function(context:ScopeContext):String
  • 示例:
js
const crudOptions = {
    columns:{
        key:{
            column:{
                formatter({value,row,index}){
                    return value + '元'
                }
            }
        }
    }
}

[key].column.order

  • 说明:列排序号,数字越小越靠前排列。
  • 类型:number
  • 默认值: 1 , 当配置0或负数则排到最前面,配置2则排到最后面
  • 场景:比如可以在commonOptions里面配置一个显示在最后面的公共时间列

[key].column.showTitle

  • 说明:是否显示title,鼠标放上去显示文本
  • 类型:boolean | string
  • 默认值: false
  • 场景:配置true,则value当做文本显示;配置string,则直接显示配置的文本

[key].column.cellRender

  • 说明:自定义单元格渲染。
  • 类型:Function(scope:ScopeContext)
  • 相关:jsx/tsx文档
js
const crudOptions = { 
    columns:{
       key:{
            column:{
                cellRender(scope:ScopeContext){
                    return <div>{scope.value}</div>
                }
            }
       }
    }   
}

[key].column.conditionalRender

  • 说明:单元格条件render,符合条件的情况下优先render
  • 类型: {match:(scope:ScopeContext)=>boolean,render:(scope:ScopeContext)=>any}
  • 默认值:无
  • 示例:
js
{
  columns:{
      key:{
          column:{
              conditionalRender:{
                  match(scope) {
                      return scope.form.isPreview;
                  },
                  render(scope) {
                      return <div style={{lineHeight:'32px'}}>{{scope.value}}</div>
                  }
              }
          }
      }
  }    
}

[key].column.editable.disabled

  • 说明:定义列是否支持行编辑。
  • 类型:boolean / Function(scope:ScopeContext)
js
{ //crudOptions
    columns:{
       key:{
            column:{
                editable:{
                    disabled: true, //直接配置boolean ,也可以配置方法根据条件判断
                    disabled: ({column,index,data}){
                        return index % 2 ===0
                    }
                }
            }
       }
    }   
}