vue单条数据按钮样式

Posted 2020-12-13 allie71

这是一个很小的问题，在最初的时候没有想到正确的逻辑，就差大神点播，然后就分享一下心得

在最开始的时候，是想着给按钮添加一个:disabled=‘flag‘设置一个动态布尔值判断，但是，由于flag是一个全局变量，在设置单个的时候，还是会全部统一样式，所以这种想法是不可靠的

然后请教了大神，用for循环来进行动态绑定

页面展示的代码如下：

<el-table-column
label="操作"
align="center">
　　<template slot-scope="scope">
　　　　<el-button
       v-if="scope.row.showBtn"
       size="mini"
       type="text"
       @click="gotodetail(scope.row.fullBidReview_id, scope.row.bidStatus_name)">审核</el-button>
   </template>
</el-table-column>

在方法中的代码如下：

getAllUserList(){
            this.$axios.post("/api/fullbidreview/selectFullbidreviewPage", {
                pageCount: this.pagesize,
                pageNum: this.currentPage,
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.data;
                this.count=res.data.count
                if(this.roleid !=3 && this.roleid !=4){
                    this.flag = true;
                }
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].bidStatus_name == ‘一次复审通过‘ && this.roleid == 3){
                        this.tableData[i].showBtn = false;
                    }else{
                        this.tableData[i].showBtn = true;
                    }
                }
            }).catch((err) => {
                console.log(err);
            })
        }

然后在页面挂载的时候调用该方法即可。