feat: 明细表支持设定列宽,以及单元格事件
This commit is contained in:
@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user