問題
我點擊有向下箭頭的框框的時候，出現(xiàn)了3個彈出框,我想只出現(xiàn)對應的行的彈出框
點擊前
點擊后
代碼
<tr v-for="item in tableData">
<td>
<label class="checkbox">
<input type="checkbox"/>
<span></span>
</label>
<!-- 有向下箭頭的框框 -->
<div @click="controlToggle" class="hover-btn">
<span></span>
</div>
<!-- 點擊后彈出的框框 -->
<ul v-show="controlDialog" class="hover-dialog">
<li @click="controlHide" class="dialog-item">禁用</li>
<li @click="controlHide" class="dialog-item">編輯</li>
<li @click="controlHide" class="dialog-item">刪除</li>
</ul>
</td>
<td>{{item.id}}</td>
<td class="td-title">{{item.title}}</td>
<td>{{item.version}}</td>
<td>{{item.grade}}</td>
<td>{{item.subject}}</td>
<td>{{item.number}}</td>
<td>{{item.where}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
</tr>
controlDialog: false,
methods:{
controlToggle(){
this.controlDialog = !this.controlDialog
},
controlHide(){
this.controlDialog = false
}
},
5 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
methods:{
controlToggle(item){
item.controlDialog = !item.controlDialog
},
controlHide(item){
item.controlDialog = false
}
},
<div @click="controlToggle(item)" class="hover-btn">
<span></span>
</div>
另一個同理。把tag綁在每一行上，而不應該是全局用統(tǒng)一tag
還有方法二，就是全局存放index，然后通過index判斷是否顯示
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
利用index索引來做
v-for = "(item,index) in data" 點擊把索引存到某個變量為xx
然后下面v-show這樣寫
v-show = "index==xx?true:false"
Helenr
TA貢獻1780條經驗 獲得超4個贊
把 controlDialog 放到 tableData 里面
methods:{
controlToggle(i){
this.tableData[i].controlDialog = !this.controlDialog
},
controlHide(i){
this.tableData[i].controlDialog = false
}},
- 5 回答
- 1 關注
- 1906 瀏覽
添加回答
舉報
0/150
提交
取消