mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-09-12 06:19:49 +08:00
chore(form): table新增一个根节点
This commit is contained in:
roymondchen
parent
d3777b236d
commit
310c1c21ce
@ -1,182 +1,190 @@
|
|||||||
<template>
|
<template>
|
||||||
<teleport to="body" :disabled="!isFullscreen">
|
<div>
|
||||||
<div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
|
<teleport to="body" :disabled="!isFullscreen">
|
||||||
<span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
|
<div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
|
||||||
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
|
<span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
|
||||||
<TMagicTable
|
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
|
||||||
v-if="model[modelName]"
|
<TMagicTable
|
||||||
ref="tMagicTable"
|
v-if="model[modelName]"
|
||||||
style="width: 100%"
|
ref="tMagicTable"
|
||||||
:row-key="config.rowKey || 'id'"
|
style="width: 100%"
|
||||||
:data="data"
|
:row-key="config.rowKey || 'id'"
|
||||||
:lastData="lastData"
|
:data="data"
|
||||||
:border="config.border"
|
:lastData="lastData"
|
||||||
:max-height="config.maxHeight"
|
:border="config.border"
|
||||||
:default-expand-all="true"
|
:max-height="config.maxHeight"
|
||||||
:key="updateKey"
|
:default-expand-all="true"
|
||||||
@select="selectHandle"
|
:key="updateKey"
|
||||||
@sort-change="sortChange"
|
@select="selectHandle"
|
||||||
>
|
@sort-change="sortChange"
|
||||||
<TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
|
|
||||||
<template v-slot="scope">
|
|
||||||
<span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
|
|
||||||
</template>
|
|
||||||
</TMagicTableColumn>
|
|
||||||
|
|
||||||
<TMagicTableColumn
|
|
||||||
label="操作"
|
|
||||||
:width="config.operateColWidth || 55"
|
|
||||||
align="center"
|
|
||||||
:fixed="config.fixed === false ? undefined : 'left'"
|
|
||||||
>
|
>
|
||||||
<template v-slot="scope">
|
<TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
|
||||||
<slot name="operateCol" :scope="scope"></slot>
|
<template v-slot="scope">
|
||||||
<TMagicIcon
|
<span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
|
||||||
v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
class="m-table-delete-icon"
|
|
||||||
@click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
><Delete
|
|
||||||
/></TMagicIcon>
|
|
||||||
</template>
|
|
||||||
</TMagicTableColumn>
|
|
||||||
|
|
||||||
<TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
|
|
||||||
<template v-slot="scope">
|
|
||||||
<TMagicTooltip
|
|
||||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
|
|
||||||
content="点击上移，双击置顶"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<TMagicButton
|
|
||||||
plain
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
:icon="ArrowUp"
|
|
||||||
:disabled="disabled"
|
|
||||||
text
|
|
||||||
@click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
@dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
></TMagicButton>
|
|
||||||
</TMagicTooltip>
|
|
||||||
<TMagicTooltip
|
|
||||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
|
|
||||||
content="点击下移，双击置底"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<TMagicButton
|
|
||||||
plain
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
:icon="ArrowDown"
|
|
||||||
:disabled="disabled"
|
|
||||||
text
|
|
||||||
@click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
@dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
|
||||||
></TMagicButton>
|
|
||||||
</TMagicTooltip>
|
|
||||||
</template>
|
|
||||||
</TMagicTableColumn>
|
|
||||||
|
|
||||||
<TMagicTableColumn
|
|
||||||
v-if="selection"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
type="selection"
|
|
||||||
width="45"
|
|
||||||
></TMagicTableColumn>
|
|
||||||
|
|
||||||
<TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
|
|
||||||
<template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
|
|
||||||
</TMagicTableColumn>
|
|
||||||
|
|
||||||
<template v-for="(column, index) in config.items">
|
|
||||||
<TMagicTableColumn
|
|
||||||
v-if="column.type !== 'hidden' && display(column.display)"
|
|
||||||
:prop="column.name"
|
|
||||||
:width="column.width"
|
|
||||||
:label="column.label"
|
|
||||||
:sortable="column.sortable"
|
|
||||||
:sort-orders="['ascending', 'descending']"
|
|
||||||
:key="column[mForm?.keyProp || '__key'] ?? index"
|
|
||||||
:class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<Container
|
|
||||||
v-if="scope.$index > -1"
|
|
||||||
labelWidth="0"
|
|
||||||
:disabled="disabled"
|
|
||||||
:prop="getProp(scope.$index)"
|
|
||||||
:rules="column.rules"
|
|
||||||
:config="makeConfig(column, scope.row)"
|
|
||||||
:model="scope.row"
|
|
||||||
:lastValues="lastData[scope.$index]"
|
|
||||||
:is-compare="isCompare"
|
|
||||||
:size="size"
|
|
||||||
@change="$emit('change', model[modelName])"
|
|
||||||
@addDiffCount="onAddDiffCount()"
|
|
||||||
></Container>
|
|
||||||
</template>
|
</template>
|
||||||
</TMagicTableColumn>
|
</TMagicTableColumn>
|
||||||
</template>
|
|
||||||
</TMagicTable>
|
|
||||||
</TMagicTooltip>
|
|
||||||
<slot></slot>
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content: space-between; margin: 10px 0">
|
<TMagicTableColumn
|
||||||
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
|
label="操作"
|
||||||
>新增一行</TMagicButton
|
:width="config.operateColWidth || 55"
|
||||||
>
|
align="center"
|
||||||
|
:fixed="config.fixed === false ? undefined : 'left'"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<slot name="operateCol" :scope="scope"></slot>
|
||||||
|
<TMagicIcon
|
||||||
|
v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
class="m-table-delete-icon"
|
||||||
|
@click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
><Delete
|
||||||
|
/></TMagicIcon>
|
||||||
|
</template>
|
||||||
|
</TMagicTableColumn>
|
||||||
|
|
||||||
<div style="display: flex">
|
<TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
|
||||||
<TMagicButton
|
<template v-slot="scope">
|
||||||
:icon="Grid"
|
<TMagicTooltip
|
||||||
size="small"
|
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
|
||||||
type="primary"
|
content="点击上移，双击置顶"
|
||||||
@click="toggleMode"
|
placement="top"
|
||||||
v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
|
>
|
||||||
>展开配置</TMagicButton
|
<TMagicButton
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowUp"
|
||||||
|
:disabled="disabled"
|
||||||
|
text
|
||||||
|
@click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
@dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
></TMagicButton>
|
||||||
|
</TMagicTooltip>
|
||||||
|
<TMagicTooltip
|
||||||
|
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
|
||||||
|
content="点击下移，双击置底"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<TMagicButton
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowDown"
|
||||||
|
:disabled="disabled"
|
||||||
|
text
|
||||||
|
@click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
@dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||||
|
></TMagicButton>
|
||||||
|
</TMagicTooltip>
|
||||||
|
</template>
|
||||||
|
</TMagicTableColumn>
|
||||||
|
|
||||||
|
<TMagicTableColumn
|
||||||
|
v-if="selection"
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
type="selection"
|
||||||
|
width="45"
|
||||||
|
></TMagicTableColumn>
|
||||||
|
|
||||||
|
<TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
|
||||||
|
<template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
|
||||||
|
</TMagicTableColumn>
|
||||||
|
|
||||||
|
<template v-for="(column, index) in config.items">
|
||||||
|
<TMagicTableColumn
|
||||||
|
v-if="column.type !== 'hidden' && display(column.display)"
|
||||||
|
:prop="column.name"
|
||||||
|
:width="column.width"
|
||||||
|
:label="column.label"
|
||||||
|
:sortable="column.sortable"
|
||||||
|
:sort-orders="['ascending', 'descending']"
|
||||||
|
:key="column[mForm?.keyProp || '__key'] ?? index"
|
||||||
|
:class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<Container
|
||||||
|
v-if="scope.$index > -1"
|
||||||
|
labelWidth="0"
|
||||||
|
:disabled="disabled"
|
||||||
|
:prop="getProp(scope.$index)"
|
||||||
|
:rules="column.rules"
|
||||||
|
:config="makeConfig(column, scope.row)"
|
||||||
|
:model="scope.row"
|
||||||
|
:lastValues="lastData[scope.$index]"
|
||||||
|
:is-compare="isCompare"
|
||||||
|
:size="size"
|
||||||
|
@change="$emit('change', model[modelName])"
|
||||||
|
@addDiffCount="onAddDiffCount()"
|
||||||
|
></Container>
|
||||||
|
</template>
|
||||||
|
</TMagicTableColumn>
|
||||||
|
</template>
|
||||||
|
</TMagicTable>
|
||||||
|
</TMagicTooltip>
|
||||||
|
<slot></slot>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: space-between; margin: 10px 0">
|
||||||
|
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
|
||||||
|
>新增一行</TMagicButton
|
||||||
>
|
>
|
||||||
<TMagicButton
|
|
||||||
:icon="FullScreen"
|
<div style="display: flex">
|
||||||
size="small"
|
<TMagicButton
|
||||||
type="primary"
|
:icon="Grid"
|
||||||
@click="toggleFullscreen"
|
size="small"
|
||||||
v-if="config.enableFullscreen !== false"
|
type="primary"
|
||||||
>
|
@click="toggleMode"
|
||||||
{{ isFullscreen ? '退出全屏' : '全屏编辑' }}
|
v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
|
||||||
</TMagicButton>
|
>展开配置</TMagicButton
|
||||||
<TMagicUpload
|
>
|
||||||
v-if="importable"
|
<TMagicButton
|
||||||
style="display: inline-block"
|
:icon="FullScreen"
|
||||||
ref="excelBtn"
|
size="small"
|
||||||
action="/noop"
|
type="primary"
|
||||||
:disabled="disabled"
|
@click="toggleFullscreen"
|
||||||
:on-change="excelHandler"
|
v-if="config.enableFullscreen !== false"
|
||||||
:auto-upload="false"
|
>
|
||||||
>
|
{{ isFullscreen ? '退出全屏' : '全屏编辑' }}
|
||||||
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
|
</TMagicButton>
|
||||||
</TMagicUpload>
|
<TMagicUpload
|
||||||
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
|
v-if="importable"
|
||||||
>清空</TMagicButton
|
style="display: inline-block"
|
||||||
|
ref="excelBtn"
|
||||||
|
action="/noop"
|
||||||
|
:disabled="disabled"
|
||||||
|
:on-change="excelHandler"
|
||||||
|
:auto-upload="false"
|
||||||
|
>
|
||||||
|
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
|
||||||
|
</TMagicUpload>
|
||||||
|
<TMagicButton
|
||||||
|
v-if="importable"
|
||||||
|
size="small"
|
||||||
|
type="warning"
|
||||||
|
:disabled="disabled"
|
||||||
|
plain
|
||||||
|
@click="clearHandler()"
|
||||||
|
>清空</TMagicButton
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom" style="text-align: right" v-if="config.pagination">
|
||||||
|
<TMagicPagination
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:hide-on-single-page="model[modelName].length < pagesize"
|
||||||
|
:current-page="pagecontext + 1"
|
||||||
|
:page-sizes="[pagesize, 60, 120, 300]"
|
||||||
|
:page-size="pagesize"
|
||||||
|
:total="model[modelName].length"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
>
|
>
|
||||||
|
</TMagicPagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</teleport>
|
||||||
<div class="bottom" style="text-align: right" v-if="config.pagination">
|
</div>
|
||||||
<TMagicPagination
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:hide-on-single-page="model[modelName].length < pagesize"
|
|
||||||
:current-page="pagecontext + 1"
|
|
||||||
:page-sizes="[pagesize, 60, 120, 300]"
|
|
||||||
:page-size="pagesize"
|
|
||||||
:total="model[modelName].length"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
>
|
|
||||||
</TMagicPagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</teleport>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user