版本号:
最新
前端版本:vue3版?还是 vue2版?
vue2
问题描述:
j-vxe-table 进行分组列
对应的 datasource 分组列无法显示数据
请问 分组列 如何对应 数据源 进行显示呢
const jvxeTabColumns = [
{
//key: 'gps',
title: '分组1',
fixed: 'left',
align: 'center',
children: [
{
title: '测试分组列1',
key: 'ces',
dataIndex: 'ces',
type: JVXETypes.input,
width: '180px',
fixed: 'left',
//defaultValue: 'normal-new',
},
{
title: '测试分组列2',
key: 'ces2',
dataIndex: 'ces2',
type: JVXETypes.input,
width: '180px',
fixed: 'left',
//defaultValue: 'normal-new',
},
{
title: '测试分组列3',
key: 'ces3',
dataIndex: 'ces3',
type: JVXETypes.normal,
width: '180px',
fixed: 'left',
//defaultValue: 'normal-new',
},
],
},
{
title: '测试值1',
key: 'ces',
dataIndex: 'ces',
type: JVXETypes.normal,
width: '180px',
fixed: 'left',
defaultValue: 'normal-new',
},
{
title: '不可编辑',
key: 'normal',
dataIndex: 'normal',
type: JVXETypes.normal,
width: '180px',
fixed: 'left',
defaultValue: 'normal-new',
},
{
title: '单行文本',
key: 'input',
dataIndex: 'input',
type: JVXETypes.input,
width: '180px',
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [
{
required: true, // 必填
message: '请输入${title}' // 显示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
message: '${title}必须以字母开头,可包含数字、下划线、横杠'
},
{
unique: true,
message: '${title}不能重复'
},
{
handler({cellValue, row, column}, callback, target) {
// cellValue 当前校验的值
// callback(flag, message) 方法必须执行且只能执行一次
// flag = 是否通过了校验,不填写或者填写 null 代表不进行任何操作
// message = 提示的类型,默认使用配置的 message
// target 行编辑的实例对象
if (cellValue === 'abc') {
callback(false, '${title}不能是abc') // false = 未通过校验
} else {
callback(true) // true = 通过验证
}
},
message: '${title}默认提示'
}
]
},
{
title: '多行文本',
key: 'textarea',
dataIndex: 'textarea',
type: JVXETypes.textarea,
width: '200px',
},
{
title: '数字',
key: 'number',
dataIndex: 'number',
type: JVXETypes.inputNumber,
width: '80px',
defaultValue: 32,
// 【统计列】sum = 求和、average = 平均值
statistics: ['sum', 'average'],
},
{
title: '下拉框',
key: 'select',
dataIndex: 'select',
type: JVXETypes.select,
width: '180px',
// 下拉选项
options: [
{title: 'String', value: 'string'},
{title: 'Integer', value: 'int'},
{title: 'Double', value: 'double'},
{title: 'Boolean', value: 'boolean'}
],
allowInput: true,
placeholder: '请选择'
},
{
title: '下拉框_字典',
key: 'select_dict',
type: JVXETypes.select,
width: '180px',
options: [],
dictCode: 'sex',
placeholder: '请选择',
},
{
title: '下拉框_多选',
key: 'select_multiple',
type: JVXETypes.selectMultiple,
width: '205px',
options: [
{title: 'String', value: 'string'},
{title: 'Integer', value: 'int'},
{title: 'Double', value: 'double'},
{title: 'Boolean', value: 'boolean'}
],
defaultValue: ['int', 'boolean'], // 多个默认项
// defaultValue: 'string,double,int', // 也可使用这种方式
placeholder: '多选',
},
{
title: '下拉框_搜索',
key: 'select_search',
type: JVXETypes.selectSearch,
width: '180px',
options: [
{title: 'String', value: 'string'},
{title: 'Integer', value: 'int'},
{title: 'Double', value: 'double'},
{title: 'Boolean', value: 'boolean'}
],
},
{
title: '日期时间',
key: 'datetime',
type: JVXETypes.datetime,
width: '200px',
defaultValue: '2019-4-30 14:52:22',
placeholder: '请选择',
},
{
title: '复选框',
key: 'checkbox',
type: JVXETypes.checkbox,
width: '100px',
customValue: ['Y', 'N'], // true ,false
defaultChecked: false,
},
{
title: '操作',
key: 'action',
type: JVXETypes.slot,
fixed: 'right',
minWidth: '100px',
align: 'center',
slotName: 'action',
}
];
const jvxeTabData = [
{
ces:'ces',
ces1:'ces1',
ces2:'ces2',
ces3:'ces3',
input: '2',
textarea: 'John Brown 1',
number: 23,
normal: 'New York Park 1',
},
{
ces:'ces',
ces1:'ces4',
ces2:'ces5',
ces3:'ces6',
input: '3',
textarea: 'Jim Green 2',
number: 22,
normal: 'London Park 2',
},
];
截图&代码:
友情提示(为了提高issue处理效率):
- 未按格式要求发帖,会被直接删掉;
- 描述过于简单或模糊,导致无法处理的,会被直接删掉;
- 请自己初判问题描述是否清楚,是否方便我们调查处理;
- 针对问题请说明是Online在线功能(需说明用的主题模板),还是生成的代码功能;