Appearance
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
}
}
}
}
}
}