在Vue 3中，你可以使用<template>元素和v-if、v-else-if、v-else指令来根据条件动态渲染不同的元素，比如单元格或输入框。以下是一个简化的例子，演示如何根据条件动态创建单元格，并在单元格中动态显示输入框或下拉框。
<template>
<table>
<tr v-for="(item, index) in items" :key="index">
<td v-for="(field, key) in item" :key="key">
<!-- 动态创建单元格内容，根据key决定渲染输入框还是下拉框 -->
<template v-if="key === 'select'">
<!-- 下拉框 -->
<select v-model="item[key]">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</template>
<template v-else>
<!-- 输入框 -->
<input v-model="item[key]" />
</template>
</td>
</tr>
</table>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 假设每个item都有一个'select'字段，用于表示该行应该显示下拉框
const items = ref([
{ name: 'John Doe', select: 'option1' },
{ age: 30, select: 'option2' },
// 更多items...
]);
return {
items,
};
},
};
</script>在这个例子中，我们使用了v-for来遍历items数组，并为每个item创建一行表格行。对于每个item的字段，我们使用v-if来判断是否是'select'字段，如果是，则渲染一个下拉框(<select>)，否则渲染一个输入框(<input>)。通过双向绑定(v-model)，我们可以保持数据和表单元素之间的同步。