【VUE在列表展示中很具对应的某列的值让改行的某个按钮隐藏或者显示,本人亲测有效】
以当前这个例子来做笔记说明
其中操作一般包括缴费和详情两个按钮,根据欠款金额如果大于0 则需要缴费,若欠款金额小于等于0则无需缴费
具体步骤如下:
1.在按钮上加对应的属性
代码:
<el-button
v-if="scope.row.isButtonVisible"
type="text"
@click="handleAddOrUpdate(scope.$index, scope.row)">缴费
</el-button>`
2.在页面展示的js中添加foreach循环遍历根据欠款的实际情况的值进行来改变当前行中的值,红色圈中的就是循环+判断+赋值
代码:
this.list.forEach(item=>{
if (item.costQiankuan<=0) {
item.isButtonVisible=false;
//this.disabled=true;
}else{
//this.disabled="disabled";
item.isButtonVisible=true;
// this.$set(item,"isButtonVisible",true);
}
按照以上的步骤即可实现,注意在使用的时候注意自己当前需要做判断的字段和你当前页面的数据集合