多维表格
 
 
 
 
 
 

79 lines
2.1 KiB

<script setup lang="ts">
import { useVModel } from '#imports'
const props = defineProps<{
modelValue: any[]
}>()
const emits = defineEmits(['update:modelValue'])
const vModel = useVModel(props, 'modelValue', emits)
const addParamRow = () => vModel.value.push({})
const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
</script>
<template>
<div class="flex flex-row justify-center">
<table>
<thead>
<tr>
<th>
<!-- Intended to be empty - For checkbox -->
</th>
<th>
<div class="text-center font-normal mb-2">Param Name</div>
</th>
<th>
<div class="text-center font-normal mb-2">Value</div>
</th>
<th>
<!-- Intended to be empty - For delete button -->
</th>
</tr>
</thead>
<tbody>
<tr v-for="(paramRow, idx) in vModel" :key="idx">
<td class="px-2">
<a-form-item>
<a-checkbox v-model:checked="paramRow.enabled" />
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
</a-form-item>
</td>
<td class="relative">
<div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
<MdiDeleteOutline class="cursor-pointer" @click="deleteParamRow(idx)" />
</div>
</td>
</tr>
<tr>
<td :colspan="12" class="text-center">
<a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
<template #icon>
<MdiPlus class="flex mx-auto" />
</template>
</a-button>
</td>
</tr>
</tbody>
</table>
</div>
</template>