style(form): 优化表格功能按钮显示

This commit is contained in:
roymondchen 2023-10-18 11:20:02 +08:00
parent 70b6bcd66b
commit 921867f650

View File

@ -120,10 +120,13 @@
</TMagicTable> </TMagicTable>
</TMagicTooltip> </TMagicTooltip>
<slot></slot> <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 v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
>新增一行</TMagicButton >新增一行</TMagicButton
> >
&nbsp;
<div style="display: flex">
<TMagicButton <TMagicButton
:icon="Grid" :icon="Grid"
size="small" size="small"
@ -150,11 +153,13 @@
:on-change="excelHandler" :on-change="excelHandler"
:auto-upload="false" :auto-upload="false"
> >
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
>&nbsp; </TMagicUpload>
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()" <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
>清空</TMagicButton >清空</TMagicButton
> >
</div>
</div>
<div class="bottom" style="text-align: right" v-if="config.pagination"> <div class="bottom" style="text-align: right" v-if="config.pagination">
<TMagicPagination <TMagicPagination
@ -371,10 +376,6 @@ const newHandler = async (row?: any) => {
emit('change', props.model[modelName.value]); emit('change', props.model[modelName.value]);
}; };
if (!(globalThis as any).XLSX) {
asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
}
onMounted(() => { onMounted(() => {
if (props.config.defautSort) { if (props.config.defautSort) {
sortChange(props.config.defautSort); sortChange(props.config.defautSort);
@ -535,10 +536,15 @@ const clearHandler = () => {
mForm?.$emit('field-change', props.prop, props.model[modelName.value]); mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
}; };
const excelHandler = (file: any) => { const excelHandler = async (file: any) => {
if (!file?.raw) { if (!file?.raw) {
return false; return false;
} }
if (!(globalThis as any).XLSX) {
await asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
}
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
const data = reader.result; const data = reader.result;