2 層の v-for は入力ボックスの追加と削除を実装し、双方向バインディング データは
下の図に示すような効果を実現します. 新しい要件に対応する大きな赤いボックスをクリックしてから、青い丸のプラス記号をクリックします大きなボックスに小さな要件を追加すると、小さなボックスに赤い色が表示されます。
インポートファイル：
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="../vue.js"></script>
<script src="../jquery-1.12.3.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
v-for には 2 つの層があり、1 つは大枠の大要求層にあり、もう 1 つは小枠の小要求層にあります。
ItemTypes: 大きなボックスの配列、削除操作を実行する対応する位置を見つけるためにインデックスを使用すると便利なように、インデックスが使用可能である必要があります; : required="true": の前にある赤い星の設定
ですfont;
deleteItem(index): 大きな要件のクリック イベントを削除します ;
addDetails(item) : 小さなリクエストのクリック イベントを追加します;
(i,index2) in item.details : ItemTypes にネストされた 2 番目のループ、インデックスは次のように定義されますindex2;
@input="inputText(index2) : Small 必要な入力イベント;
deleteDetailsItem(i,index2,item,index) : 小さなリクエストのクリック イベントを削除します。
注: < el-form-item > は外部で使用する必要があります< el-form-item > タグを使用しないと、エラーが報告されます。
HTML コード:
<div id="app">
<el-form>
<div v-for="(item,index) in ItemTypes" :key="index" style="margin-bottom: 2%; box-shadow: 0px 0px 5px grey; padding: 10px; border-radius: 1rem; ">
<el-form-item :required="true" label="大要求内容:">
<el-input v-model="item.NAME"
type="textarea"
maxlength="66"
show-word-limit
style="width:80%"
placeholder="请填写大要求内容">
</el-input>
<el-button type="danger" @click="deleteItem(index)">-</el-button>
</el-form-item>
<el-button type="primary" icon="el-icon-plus" circle @click="addDetails(item)"></el-button>
<span style="color: #c0c4cc; font-size: 18px; "> 点击添加小要求</span>
<br />
<div v-for="(i,index2) in item.details" :key="index2" style="margin-top: 2%;">
<el-form-item :required="true" label="小要求:">
<el-input v-model="i.DESCRIPTION"
type="textarea"
maxlength="66"
show-word-limit
style="width:80%"
placeholder="请填写小要求"
@input="inputText(index2)" >
</el-input>
<el-button type="danger" @click="deleteDetailsItem(i,index2,item,index)">-</el-button>
</el-form-item>
</div>
</div>
<el-button type="primary" @click="addItem">新增要求 </el-button>
</el-form>
</div>
JS：
<script>
var app = new Vue({
el: '#app',
data: {
//ItemTypes:[],
Itemdetails:[],
ItemTypes: [ //大要求
{
ACCESS_ID: 0,
NAME: '',
details: [] //这里存的是小要求里的数据
}
],
},
methods:{
//弹框中删除大要求按钮项
deleteItem(index) {
if (this.ItemTypes.length <= 1) {
//如果只有一个输入框则不可以删除
return false
}
this.ItemTypes.splice(index, 1) //删除了数组中对应的数据也就将这个位置的输入框删除
},
//新增大要求项
addItem(item) {
console.log("item",item);
this.ItemTypes.push( //增加就push进数组一个新值
{
ACCESS_ID: 0,
NAME:'',
details: []
}
)
},
//新增小要求部分
addDetails(item) {
this.Itemdetails = item.details;
this.Itemdetails.push(
{
ACCESS_ID: 0,
ACCESSITEMTYPE_ID: 0,
DESCRIPTION: [],
ATYPE: 1
}
)
},
//删除小要求部分
deleteDetailsItem(i, index2, item,index) {
console.log(item);
if (this.Itemdetails.length <= 1) {
return false
}
this.ItemTypes[index].details.splice(index2, 1); //找到大要求里index中对应的小要求index2索引值
},
//小要求中的input事件
inputText(index2){
console.log("index2",index2);
}
}
})
</script>
※もうひとつのプロジェクト学習ノートが完成！! ! エラーや最適化がある場合はお知らせください *