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