feat: 明细表支持设定列宽,以及单元格事件

This commit is contained in:
gaoyunqi
2024-03-04 18:25:05 +08:00
parent 0d4b4f4d45
commit 09c4b9d0ed

View File

@ -67,7 +67,8 @@
:index="index" :index="index"
:mainKey="mainKey" :mainKey="mainKey"
v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
@change="onFieldChange(record, index)" @blur="onFieldBlur(column, record, index)"
@change="onFieldChange(column, record, index)"
/> />
</template> </template>
</FormItem> </FormItem>
@ -197,10 +198,29 @@
// 注入表单数据 // 注入表单数据
const formModel = inject<any>('formModel', null); const formModel = inject<any>('formModel', null);
const onFieldChange = (row, rowIndex) => { const onFieldChange = (column, row, rowIndex) => {
console.log('row-->', row, rowIndex); const evt = column?.componentProps?.events?.change;
if (evt) {
evt({ column, row, rowIndex, formModel });
}
}; };
const onFieldBlur = (column, row, rowIndex) => {
const evt = column?.componentProps?.events?.blur;
if (evt) {
evt({ column, row, rowIndex, formModel });
}
};
function setColWidth(columns) {
columns.value.forEach((col: any) => {
// 设置表格的列宽 注意操作这列是没有componentProps
if (col?.componentProps?.colWidth) {
col.width = +col.componentProps.colWidth;
}
});
}
onMounted(() => { onMounted(() => {
data.value = cloneDeep(props.value); data.value = cloneDeep(props.value);
@ -212,12 +232,7 @@
width: 60 width: 60
}); });
} }
columns.value.forEach((col: any) => { setColWidth(columns);
// 设置表格的列宽 注意操作这列是没有componentProps
if (col?.componentProps?.colWidth) {
col.width = +col.componentProps.colWidth;
}
});
columns.value = filterColum(columns.value); columns.value = filterColum(columns.value);
nextTick(() => { nextTick(() => {
//处理多表头 //处理多表头
@ -234,8 +249,8 @@
watch( watch(
() => props.columns, () => props.columns,
(val) => { (val) => {
// console.log('watch props.columns');
columns.value = filterColum(val); columns.value = filterColum(val);
setColWidth(columns);
} }
); );
@ -524,7 +539,7 @@
} }
} }
} }
console.log('cacheMap', cacheMap); //console.log('cacheMap', cacheMap);
return col || col?.length ? deepMerge(col, column) : col; return col || col?.length ? deepMerge(col, column) : col;
}; };