當首先填充此表時，每個文本都是灰色的并帶有洗掉線，并且按鈕被禁用。我想要的是當我單擊任何特定行時，它將顏色更改為黑色和 text-decoration:none 并僅啟用該行上的按鈕。
單擊任何行時，當前代碼會更改存在的每一行的顏色和文本裝飾。
<table >
<tbody>
<tr v-for="(line,index) in summary_lines_list" :key="index">
<td><p : v-on:click="EnableLine($event)" :style='{"text-decoration":(line_selected?"none":"line-through"),"color":(line_selected?"black":"grey")}'>{{line}}</p> </td>
<td><button : :disabled="!line_selected">Use</button></td>
</tr>
</tbody>
</table>
點擊方法：
methods:{
EnableLine(event){
this.line_selected = !this.line_selected;
},
}
data(){
return {
line_selected:false
}
}
uj5u.com熱心網友回復：
您應該保存所選行的索引以僅突出顯示一行而不是全部
EnableLine(index)
和
:style='{"text-decoration":(line_selected === index?"none":"line-through"),"color":(line_selected?"black":"grey")}'
對于多行選擇，您需要創建陣列來存盤所選的所有索引。看看例子！
new Vue({
el: "#app",
data: () => ({
summary_lines_list: [
'first line',
'second line',
'third line',
'fourth line'
],
line_selected: []
}),
methods: {
isSelected(index) {
return this.line_selected.includes(index)
},
toggle: function(index){
if(this.isSelected(index)) {
this.line_selected.splice(this.line_selected.indexOf(index), 1)
} else {
this.line_selected.push(index)
}
},
style(index) {
const isSelected = this.isSelected(index)
return {
'text-decoration': isSelected ? 'none' : 'line-through',
'color': isSelected ? 'black' : 'grey'
}
}
}
})<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="table table-striped">
<tbody>
<tr v-for="(line, index) in summary_lines_list" :key="index">
<td>
<p
:class="'line_' index"
v-on:click="toggle(index)"
:style="style(index)"
>{{line}}</p>
</td>
<td>
<button
class="btn btn-sm btn-success"
:class="'line_' index"
:disabled="!isSelected(index)"
>Use</button>
</td>
</tr>
</tbody>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385876.html
下一篇：如何將其轉換為vuejs中的函式