添加demo

This commit is contained in:
神仙都没用 2025-04-03 11:37:32 +08:00
parent 49cf3cc0db
commit db9f96baad
4 changed files with 73 additions and 16 deletions

View File

@ -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(() => {

View File

@ -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>

View File

@ -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>

View File

@ -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>