vue单条数据按钮样式

Posted allie71

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue单条数据按钮样式相关的知识,希望对你有一定的参考价值。

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

在最开始的时候,是想着给按钮添加一个: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);
            })
        }

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

以上是关于vue单条数据按钮样式的主要内容,如果未能解决你的问题,请参考以下文章

vue前端样式问题?

用Vue实现点击一个按钮,实现切换样式的效果

Vue App 不显示反应器链接片段

vue循环了一组按钮怎么点其中一个按钮只修改这个按钮的样式?

ant design vue 表格 多选默认选择某几项(数据回显问题)

以编程方式插入的按钮样式无法正常工作