thzxcx/vue3
1
0
Fork 0
Code Pull Requests Packages Releases Activity

chore: select-transfer-modal 修改

Browse Source
This commit is contained in:
Hefeng
2024-01-30 13:24:07 +08:00
parent 258d63b376
commit a7c5ca8f48
2 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/select-transfer-modal/index.vue
View File

@ -14,15 +14,14 @@
</slot>
</span>
<el-config-provider :locale="locale">
<el-dialog
v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
:z-index="zIndex" @open="getList" @closed="closed"
>
<el-dialog v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
:z-index="zIndex" @open="getList" @closed="closed">
<div flex>
<slot name="left" />
<div grow>
<el-form ref="queryRef" :model="queryParams" inline>
<el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label" :prop="formItem.prop">
<el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label"
:prop="formItem.prop">
<el-select v-if="formItem.selectOptions" :placeholder="formItem.placeholder">
<el-option v-for="option in formItem.selectOptions" :key="option.value" :value="option.value">
{{ option.label }}
@ -39,34 +38,21 @@
</el-button>
</el-form-item>
</el-form>
<el-transfer
v-model="transferValue"
v-loading="loading"
inline-block
text-left
style="--el-transfer-panel-width:25vw"
:titles="['待选项', '已选项']"
:button-texts="['移除', '添加']"
:format="{
<el-transfer v-model="transferValue" v-loading="loading" inline-block text-left
style="--el-transfer-panel-width:25vw" :titles="['待选项', '已选项']" :button-texts="['移除', '添加']" :format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
:filter-method="filterMethod"
:props="props"
>
}" :data="data" :filter-method="filterMethod" :props="props">
<template #default="{ option }">
<slot name="transfer" :option="option">
{{ option[props.label] }}
</slot>
</template>
<template #left-footer>
<el-pagination
v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum"
v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px
:page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
@current-change="getList"
/>
<el-pagination v-if="!hidePagination && total > queryParams.pageSize"
v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" background small
layout="total, sizes, prev, next, jumper" mt-9px :page-sizes="pageSizes" :pager-count="pagerCount"
:total="total" @size-change="handleSizeChange" @current-change="getList" />
</template>
</el-transfer>
</div>
@ -262,5 +248,14 @@ watch(() => properties.show, (show) => {
.el-checkbox:last-of-type {
margin-right: 30px;
}
.el-transfer {
width: 100%;
display: flex;
.el-transfer-panel {
flex: 1;
}
}
}
</style>

2
types/auto-imports.d.ts vendored
View File

@ -306,7 +306,6 @@ declare module 'vue' {
readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']>
@ -594,7 +593,6 @@ declare module '@vue/runtime-core' {
readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']>