add table 行内编辑

This commit is contained in:
Theluyuan 2023-02-17 11:34:58 +08:00
parent 05e5b84c5c
commit 0df15d84de
7 changed files with 184 additions and 134 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -57,6 +57,8 @@ const props = withDefaults(defineProps<TableRowProps>(), {
const tableExpandAll = ref(props.defaultExpandAll);
const editIndex:any = ref({})
const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
get() {
return [...props.expandKeys];
@ -564,6 +566,7 @@ const radioProps = props.getRadioProps(props.data, props.index);
renderCellClassName(data, column, index, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
@click="editIndex[columnIndex] = true"
>
<div
style="display: flex"
@ -603,8 +606,13 @@ const radioProps = props.getRadioProps(props.data, props.index);
>
{{ data[column.key] }}
</lay-tooltip>
<template v-else>
<template v-if="column.edit">
<span v-if="!editIndex[columnIndex]"> {{ data[column.key] }} </span>
<lay-input :autofocus="true" v-model="data[column.key]" v-else @keyup.enter = "editIndex[columnIndex] = false" @blur="editIndex[columnIndex] = false"></lay-input>
</template>
<span v-else> {{ data[column.key] }} </span>
</template>
</div>
</td>
</template>
@ -674,3 +682,10 @@ const radioProps = props.getRadioProps(props.data, props.index);
</template>
</template>
</template>
<style scoped>
.layui-table-cell :deep(.layui-input input){
padding-left: 0;
}
</style>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long