4dkankan-components/docs/examples/table-v2/inline-editing.vue

<template>
    <div style="height: 400px">
        <el-auto-resizer>
            <template #default="{ height, width }">
                <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" fixed />
            </template>
        </el-auto-resizer>
    </div>
</template>

<script lang="tsx" setup>
import { nextTick, ref, resolveDynamicComponent } from 'vue'

import type { FunctionalComponent } from 'vue'
import type { Column, ElInput } from 'element-plus'

const Input = resolveDynamicComponent('ElInput') as typeof ElInput

type SelectionCellProps = {
    value: string
    intermediate?: boolean
    onChange: (value: string) => void
    forwardRef: (el: InstanceType<typeof ElInput>) => void
}

const InputCell: FunctionalComponent<SelectionCellProps> = ({ value, onChange, forwardRef }) => {
    return <Input ref={forwardRef as any} onInput={onChange} modelValue={value} />
}

const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
    Array.from({ length }).map((_, columnIndex) => ({
        ...props,
        key: `${prefix}${columnIndex}`,
        dataKey: `${prefix}${columnIndex}`,
        title: `Column ${columnIndex}`,
        width: 150,
    }))

const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
    Array.from({ length }).map((_, rowIndex) => {
        return columns.reduce(
            (rowData, column, columnIndex) => {
                rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
                return rowData
            },
            {
                id: `${prefix}${rowIndex}`,
                editing: false,
                parentId: null,
            }
        )
    })

const columns: Column<any>[] = generateColumns(10)
columns[0] = {
    ...columns[0],
    title: 'Editable Column',
    cellRenderer: ({ rowData, column }) => {
        const onChange = (value: string) => {
            rowData[column.dataKey!] = value
        }
        const onEnterEditMode = () => {
            rowData.editing = true
        }

        const onExitEditMode = () => (rowData.editing = false)
        const input = ref()
        const setRef = el => {
            input.value = el
            if (el) {
                el.focus?.()
            }
        }

        return rowData.editing ? (
            <InputCell forwardRef={setRef} value={rowData[column.dataKey!]} onChange={onChange} onBlur={onExitEditMode} onKeydownEnter={onExitEditMode} />
        ) : (
            <div class="table-v2-inline-editing-trigger" onClick={onEnterEditMode}>
                {rowData[column.dataKey!]}
            </div>
        )
    },
}

const data = ref(generateData(columns, 200))
</script>

<style>
.table-v2-inline-editing-trigger {
    border: 1px transparent dotted;
    padding: 4px;
}

.table-v2-inline-editing-trigger:hover {
    border-color: var(--el-color-primary);
}
</style>