可以简单看下如下图片，没有做规则校验的和样式的处理的，感兴趣的同学可以做下，必须输入数字
我们接下来使用vue和react都实现下：具体的逻辑会在代码注释中体现
1.vue2
<template>
<div id="app">
<div>
层数：<input
ref="myInput"
type="text"
placeholder="请输入层数"
@change="handleChange"
/>
</div>
<ul>
<li v-for="(_, index) in ary" :key="index">
第{{ index + 1 }}层<input type="text" @change="handleChangeItem($event, index)" />
</li>
</ul>
<button @click="handleClick">请求接口</button>
<button @click="handleCannel">取消</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
resAry: [], //用于保存最终提交参数数据的数组
ary: [], //用作循环展示input的循环空数组
};
},
methods: {
handleChange(e) {
// 将输入的字符串转为数字
const num = Number(e.target.value);
// 定义一个num长的空数组
this.ary = new Array(num);
// 这个地方还需要做个判断，如果后续输入的数字小于原来的就要把数组截取
if (this.resAry && num < this.resAry.length) {
this.resAry = this.resAry.slice(0, num);
}
},
handleChangeItem(e, idx) {
// this.resAry.push(e.target.value); 这个地方不能用push，因为后续需要如何错位的填写就会有问题
// 直接给对应的层数赋值
this.resAry[idx] = e.target.value;
},
// 提交的操作
handleClick() {
// 这个地方请求接口发送请求展示别的内容
// 最终的数据是一个数组
console.log(this.resAry);
},
// 取消的操作
handleCannel() {
this.ary = [];
this.resAry = [];
this.$refs.myInput.value = "";
},
},
};
</script>
<style></style>
2.vue3+ts实现
<script setup lang="ts">
import { reactive, ref, Ref } from "vue";
// 不能单独的将ary定义为一个数据，那样的话会丢失响应式的，需要包括在一个对象中
// 对此有疑问的可以具体的看下reactive响应式原理
let data = reactive({
ary: [] as string[],
resAry: [] as string[],
});
// 获取input输入框这个dom元素是为了后续取消的操作
const myInput: Ref<HTMLInputElement | null> = ref(null);
// 输入层数的操作
const handleChange = (e: Event) => {
// 下面两种方法都可以，就是ts的类型判定
// const num = Number((<HTMLInputElement>e.target).value);
const num = Number((e.target as HTMLInputElement).value);
// 操作循环的数据，定义为num长度的，每一项都是空字符的数组
data.ary = new Array(num).fill("");
// 在这个地方还需要做个判断进行，输入的层数与原本展示的input数量对比的,需要截取数组
if (data.resAry && num < data.resAry.length) {
data.resAry = data.resAry.slice(0, num);
}
};
// 每一层输入的操作
const handleChangeItem = (e: Event, idx: number) => {
const value = (e.target as HTMLInputElement).value;
data.resAry[idx] = value;
};
const handleClick = () => {
//请求接口的最终参数
console.log(data.resAry);
};
// 取消的操作，所有的数据都置空
const handleCannel = () => {
data.resAry = [];
data.ary = [];
// 这个地方需要注意下，因为是用的ts
(<HTMLInputElement>myInput.value).value = "";
};
</script>
<template>
<div id="app">
<div>
层数：<input
ref="myInput"
type="text"
placeholder="请输入层数"
@change="handleChange($event)"
/>
</div>
<ul>
<li v-for="(_, index) in data.ary" :key="index">
第{{ index + 1 }}层<input type="text" @change="handleChangeItem($event, index)" />
</li>
</ul>
<button @click="handleClick">请求接口</button>
<button @click="handleCannel">取消</button>
</div>
</template>
<style scoped></style>
