mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-15 15:42:50 +00:00
添加demo
This commit is contained in:
parent
49cf3cc0db
commit
db9f96baad
@ -9,7 +9,7 @@
|
|||||||
:src="url"
|
:src="url"
|
||||||
:fit="fit"
|
:fit="fit"
|
||||||
:lazy="lazy"
|
:lazy="lazy"
|
||||||
:preview-src-list="urls"
|
:preview-src-list="preview ? urls : undefined"
|
||||||
:style="{
|
:style="{
|
||||||
height: style.h,
|
height: style.h,
|
||||||
width: style.w
|
width: style.w
|
||||||
@ -51,7 +51,11 @@ const props = defineProps({
|
|||||||
type: String as PropType<'' | 'contain' | 'cover' | 'none' | 'fill' | 'scale-down'>,
|
type: String as PropType<'' | 'contain' | 'cover' | 'none' | 'fill' | 'scale-down'>,
|
||||||
default: 'cover'
|
default: 'cover'
|
||||||
},
|
},
|
||||||
compress: String as PropType<'oss' | 'none'>
|
compress: String as PropType<'oss' | 'none'>,
|
||||||
|
preview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const urls = computed(() => {
|
const urls = computed(() => {
|
||||||
|
|||||||
@ -22,15 +22,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useForm } from '@cool-vue/crud';
|
import { useForm } from '@cool-vue/crud';
|
||||||
import { useCool } from '/@/cool';
|
import { useCool } from '/@/cool';
|
||||||
import UserSelect from '/$/user/components/user-select.vue';
|
|
||||||
|
|
||||||
const { service } = useCool();
|
const { service, refs, setRefs } = useCool();
|
||||||
const Form = useForm();
|
const Form = useForm();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
label: '头像',
|
label: '头像',
|
||||||
prop: 'headImg',
|
prop: 'avatarUrl',
|
||||||
component: {
|
component: {
|
||||||
name: 'cl-avatar'
|
name: 'cl-avatar'
|
||||||
}
|
}
|
||||||
@ -55,9 +54,12 @@ function open() {
|
|||||||
prop: 'a',
|
prop: 'a',
|
||||||
value: [],
|
value: [],
|
||||||
component: {
|
component: {
|
||||||
vm: UserSelect,
|
name: 'cl-select-table',
|
||||||
props: {
|
props: {
|
||||||
multiple: true
|
pickerType: 'default',
|
||||||
|
multiple: true,
|
||||||
|
columns,
|
||||||
|
service: service.user.info
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
span: 12
|
span: 12
|
||||||
@ -71,7 +73,7 @@ function open() {
|
|||||||
pickerType: 'default',
|
pickerType: 'default',
|
||||||
multiple: false,
|
multiple: false,
|
||||||
columns,
|
columns,
|
||||||
service: service.base.sys.user
|
service: service.user.info
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
span: 12
|
span: 12
|
||||||
@ -86,7 +88,7 @@ function open() {
|
|||||||
pickerType: 'text',
|
pickerType: 'text',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
columns,
|
columns,
|
||||||
service: service.base.sys.user
|
service: service.user.info
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
span: 12
|
span: 12
|
||||||
@ -100,11 +102,26 @@ function open() {
|
|||||||
pickerType: 'text',
|
pickerType: 'text',
|
||||||
multiple: false,
|
multiple: false,
|
||||||
columns,
|
columns,
|
||||||
service: service.base.sys.user
|
service: service.user.info
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
span: 12
|
span: 12
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '回显',
|
||||||
|
prop: 'f',
|
||||||
|
component: {
|
||||||
|
name: 'cl-select-table',
|
||||||
|
props: {
|
||||||
|
pickerType: 'default',
|
||||||
|
multiple: false,
|
||||||
|
columns,
|
||||||
|
service: service.user.info
|
||||||
|
},
|
||||||
|
// 【很重要】设置 ref
|
||||||
|
ref: setRefs('selectTable')
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '多选 - table',
|
label: '多选 - table',
|
||||||
prop: 'e',
|
prop: 'e',
|
||||||
@ -115,11 +132,24 @@ function open() {
|
|||||||
pickerType: 'table',
|
pickerType: 'table',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
columns,
|
columns,
|
||||||
service: service.base.sys.user
|
service: service.user.info
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
// useUpsert 中使用 onOpened
|
||||||
|
on: {
|
||||||
|
open() {
|
||||||
|
// 【很重要】设置回显,实际根据接口返回
|
||||||
|
refs.selectTable?.set([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
avatarUrl: 'http://....',
|
||||||
|
nickName: '橘子'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -55,8 +55,23 @@ function open() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '回显',
|
||||||
|
prop: 'testId',
|
||||||
|
component: {
|
||||||
|
name: 'cl-user-select',
|
||||||
|
props: {
|
||||||
|
// 【很重要】立即刷新
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
form: {
|
||||||
|
// 【很重要】手动设置值,实际根据接口返回
|
||||||
|
testId: 2
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -14,9 +14,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<cl-crud padding="0">
|
<cl-crud padding="0">
|
||||||
<cl-table :ref="setRefs('table')" :data="data" :auto-height="false" />
|
<cl-row>
|
||||||
|
<cl-table :ref="setRefs('table')" :data="data" :auto-height="false" />
|
||||||
|
</cl-row>
|
||||||
|
|
||||||
<cl-row type="flex" align="middle" justify="end" :style="{ marginTop: '10px' }">
|
<cl-row type="flex" align="middle" justify="end">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-model:current-page="pager.page"
|
v-model:current-page="pager.page"
|
||||||
:page-size="pager.size"
|
:page-size="pager.size"
|
||||||
@ -39,7 +41,13 @@
|
|||||||
<template v-for="(item, index) in data" :key="index">
|
<template v-for="(item, index) in data" :key="index">
|
||||||
<slot name="item" :item="item" :index="index">
|
<slot name="item" :item="item" :index="index">
|
||||||
<template v-if="pickerType == 'default'">
|
<template v-if="pickerType == 'default'">
|
||||||
<cl-image :src="item[dict.img]" :size="24" class="mr-[5px]" />
|
<cl-image
|
||||||
|
:src="item[dict.img]"
|
||||||
|
:size="24"
|
||||||
|
:radius="5"
|
||||||
|
:preview="false"
|
||||||
|
class="mr-[5px]"
|
||||||
|
/>
|
||||||
<span v-if="!multiple">{{ item[dict.text] }}</span>
|
<span v-if="!multiple">{{ item[dict.text] }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user