|
|
@ -1,3 +1,4 @@ |
|
|
|
|
|
|
|
<!-- eslint-disable vue/no-mutating-props --> |
|
|
|
<script lang="tsx"> |
|
|
|
<script lang="tsx"> |
|
|
|
import type { CSSProperties } from 'vue' |
|
|
|
import type { CSSProperties } from 'vue' |
|
|
|
import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue' |
|
|
|
import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue' |
|
|
@ -138,6 +139,11 @@ export default defineComponent({ |
|
|
|
return option?.label ?? value |
|
|
|
return option?.label ?? value |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getRowEditable = computed(() => { |
|
|
|
|
|
|
|
const { editable } = props.record || {} |
|
|
|
|
|
|
|
return !!editable |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const getWrapperStyle = computed((): CSSProperties => { |
|
|
|
const getWrapperStyle = computed((): CSSProperties => { |
|
|
|
if (unref(getIsCheckComp) || unref(getRowEditable)) |
|
|
|
if (unref(getIsCheckComp) || unref(getRowEditable)) |
|
|
|
return {} |
|
|
|
return {} |
|
|
@ -152,11 +158,6 @@ export default defineComponent({ |
|
|
|
return `edit-cell-align-${align}` |
|
|
|
return `edit-cell-align-${align}` |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const getRowEditable = computed(() => { |
|
|
|
|
|
|
|
const { editable } = props.record || {} |
|
|
|
|
|
|
|
return !!editable |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
watchEffect(() => { |
|
|
|
// defaultValueRef.value = props.value; |
|
|
|
// defaultValueRef.value = props.value; |
|
|
|
currentValueRef.value = props.value |
|
|
|
currentValueRef.value = props.value |
|
|
@ -339,10 +340,8 @@ export default defineComponent({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) { |
|
|
|
function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) { |
|
|
|
if (props.record) { |
|
|
|
if (props.record) |
|
|
|
/* eslint-disable */ |
|
|
|
|
|
|
|
isArray(props.record[cbs]) ? props.record[cbs]?.push(handle) : (props.record[cbs] = [handle]) |
|
|
|
isArray(props.record[cbs]) ? props.record[cbs]?.push(handle) : (props.record[cbs] = [handle]) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (props.record) { |
|
|
|
if (props.record) { |
|
|
@ -351,19 +350,19 @@ export default defineComponent({ |
|
|
|
initCbs('cancelCbs', handleCancel) |
|
|
|
initCbs('cancelCbs', handleCancel) |
|
|
|
|
|
|
|
|
|
|
|
if (props.column.dataIndex) { |
|
|
|
if (props.column.dataIndex) { |
|
|
|
if (!props.record.editValueRefs) props.record.editValueRefs = {} |
|
|
|
if (!props.record.editValueRefs) |
|
|
|
|
|
|
|
props.record.editValueRefs = {} |
|
|
|
props.record.editValueRefs[props.column.dataIndex as any] = currentValueRef |
|
|
|
props.record.editValueRefs[props.column.dataIndex as any] = currentValueRef |
|
|
|
} |
|
|
|
} |
|
|
|
/* eslint-disable */ |
|
|
|
|
|
|
|
props.record.onCancelEdit = () => { |
|
|
|
props.record.onCancelEdit = () => { |
|
|
|
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn()) |
|
|
|
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach(fn => fn()) |
|
|
|
} |
|
|
|
} |
|
|
|
/* eslint-disable */ |
|
|
|
|
|
|
|
props.record.onSubmitEdit = async () => { |
|
|
|
props.record.onSubmitEdit = async () => { |
|
|
|
if (isArray(props.record?.submitCbs)) { |
|
|
|
if (isArray(props.record?.submitCbs)) { |
|
|
|
if (!props.record?.onValid?.()) return |
|
|
|
if (!props.record?.onValid?.()) |
|
|
|
|
|
|
|
return |
|
|
|
const submitFns = props.record?.submitCbs || [] |
|
|
|
const submitFns = props.record?.submitCbs || [] |
|
|
|
submitFns.forEach((fn) => fn(false, false)) |
|
|
|
submitFns.forEach(fn => fn(false, false)) |
|
|
|
table.emit?.('edit-row-end') |
|
|
|
table.emit?.('edit-row-end') |
|
|
|
return true |
|
|
|
return true |
|
|
|
} |
|
|
|
} |
|
|
@ -392,7 +391,7 @@ export default defineComponent({ |
|
|
|
getValues, |
|
|
|
getValues, |
|
|
|
handleEnter, |
|
|
|
handleEnter, |
|
|
|
handleSubmitClick, |
|
|
|
handleSubmitClick, |
|
|
|
spinning |
|
|
|
spinning, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
render() { |
|
|
|
render() { |
|
|
@ -406,11 +405,11 @@ export default defineComponent({ |
|
|
|
<div class="cell-content" title={this.column.ellipsis ? this.getValues ?? '' : ''}> |
|
|
|
<div class="cell-content" title={this.column.ellipsis ? this.getValues ?? '' : ''}> |
|
|
|
{this.column.editRender |
|
|
|
{this.column.editRender |
|
|
|
? this.column.editRender({ |
|
|
|
? this.column.editRender({ |
|
|
|
text: this.value, |
|
|
|
text: this.value, |
|
|
|
record: this.record as Recordable, |
|
|
|
record: this.record as Recordable, |
|
|
|
column: this.column, |
|
|
|
column: this.column, |
|
|
|
index: this.index |
|
|
|
index: this.index, |
|
|
|
}) |
|
|
|
}) |
|
|
|
: this.getValues ?? '\u00A0'} |
|
|
|
: this.getValues ?? '\u00A0'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{!this.column.editRow && <FormOutlined class={`${this.prefixCls}__normal-icon`} />} |
|
|
|
{!this.column.editRow && <FormOutlined class={`${this.prefixCls}__normal-icon`} />} |
|
|
@ -442,9 +441,10 @@ export default defineComponent({ |
|
|
|
)} |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
<style lang="less"> |
|
|
|
@prefix-cls: ~'@{namespace}-editable-cell'; |
|
|
|
@prefix-cls: ~'@{namespace}-editable-cell'; |
|
|
|
|
|
|
|
|
|
|
|