mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
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 { ref } from 'vue'
|
|
import { ElInput } from 'element-plus'
|
|
|
|
import type { FunctionalComponent } from 'vue'
|
|
import type { Column, InputInstance } from 'element-plus'
|
|
|
|
type SelectionCellProps = {
|
|
value: string
|
|
intermediate?: boolean
|
|
onChange: (value: string) => void
|
|
forwardRef: (el: InputInstance) => void
|
|
}
|
|
|
|
const InputCell: FunctionalComponent<SelectionCellProps> = ({
|
|
value,
|
|
onChange,
|
|
forwardRef,
|
|
}) => {
|
|
return (
|
|
<ElInput 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>
|