mirror of https://github.com/veypi/OneAuth.git
crud grid
veypi
1 year ago
parent
2dda72bbf3
commit
8a0b44fb96
@ -0,0 +1,90 @@
|
||||
<!--
|
||||
* crud.vue
|
||||
* Copyright (C) 2023 veypi <i@veypi.com>
|
||||
* 2023-10-10 19:29
|
||||
* Distributed under terms of the MIT license.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<q-page-sticky position="top-right" style="z-index: 20" :offset="[27, 27]">
|
||||
<q-btn @click="modeV = !modeV" round icon="save_as" class="" />
|
||||
</q-page-sticky>
|
||||
<div class="grid" :class="[modeV ? '' : 'grid-cols-2']">
|
||||
<div class="grid" :style="modeV ? grid_len : ''">
|
||||
<div :class="styles.k" v-for="k of keys" :key="k.name">
|
||||
{{ k.label || k.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" :style="modeV ? '' : grid_len">
|
||||
<div class="grid hover:bg-gray-200" :style="modeV ? grid_len : ''" v-for="( item, idx ) in data " :key="idx">
|
||||
<div :class="styles.v" v-for="k of keys" :key="k.name">
|
||||
{{ item[k.name] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
|
||||
interface itemProp {
|
||||
name: '',
|
||||
label?: '',
|
||||
value: any,
|
||||
type?: '',
|
||||
}
|
||||
|
||||
interface keyProp {
|
||||
name: string,
|
||||
label?: string,
|
||||
default?: any,
|
||||
typ?: string,
|
||||
}
|
||||
|
||||
const grid_len = computed(() => {
|
||||
return {
|
||||
'grid-template-columns': 'repeat(' +
|
||||
(modeV.value ? props.keys?.length : props.data?.length)
|
||||
+ ', minmax(0, 1fr))'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
let props = withDefaults(defineProps<{
|
||||
vertical?: boolean
|
||||
keys?: keyProp[],
|
||||
data?: any[]
|
||||
kclass?: Array<string>,
|
||||
vclass?: Array<string>,
|
||||
cclass?: Array<string>,
|
||||
}>(),
|
||||
{
|
||||
vertical: false,
|
||||
data: [] as any,
|
||||
kclass: [] as any,
|
||||
vclass: [] as any,
|
||||
cclass: ['w-40', 'h-40'] as any,
|
||||
}
|
||||
)
|
||||
|
||||
const styles = computed(() => {
|
||||
let k = [];
|
||||
let v = [];
|
||||
k.push(...props.kclass, ...props.cclass)
|
||||
v.push(...props.vclass, ...props.cclass)
|
||||
return {
|
||||
k, v
|
||||
}
|
||||
})
|
||||
const modeV = ref(props.vertical)
|
||||
|
||||
watch(computed(() => props.vertical), (v) => modeV.value = v)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* AppCfg.vue
|
||||
* Copyright (C) 2023 veypi <i@veypi.com>
|
||||
* 2023-10-10 16:08
|
||||
* Distributed under terms of the MIT license.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<CRUD :keys="keys" :data="data">
|
||||
<template #a="">_____</template>
|
||||
</CRUD>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import CRUD from 'src/components/crud.vue'
|
||||
import { ref } from 'vue';
|
||||
const keys = ref<any>([
|
||||
{
|
||||
name: 'name',
|
||||
label: '阿萨德',
|
||||
}, { name: 'key' }, { name: 'status' }
|
||||
])
|
||||
|
||||
const data = ref([
|
||||
{ name: 'asd', key: 'akk' },
|
||||
{ name: '1sd', key: '1kk' },
|
||||
{ name: '2sd', key: '2kk' },
|
||||
{ name: '3sd', key: '3kk' },
|
||||
{ name: '4sd', key: '4kk' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue