需求:点击到款确认,状态变成已到款确认,state状态变成已完成

 contentlist: [
        {
          id: "PM00100132312-1",
          title: "中煤鄂尔多斯甲醇配套管线",
          state: "已完成",
          cgs: "上海易旭金属材料有限公司",
          zl: 100.0,
          sl: 1,
          htje: 32900,
          fl: 23,
          scdate: "2019-09-09"
        },{
          id: "PM00100132312-7",
          title: "中煤鄂尔多斯甲醇配套管线",
          state: "执行中",
          cgs: "上海易旭金属材料有限公司",
          zl: 100.0,
          sl: 1,
          htje: 32900,
          fl: 23,
          scdate: "2019-09-09"
        }
      ]

页面按钮

<el-row class="btn">
        <el-col :span="24" v-if="item.state=='已完成'" style="color:#ccc">已到款确认</el-col>
        <el-col :span="24" v-if="item.state=='执行中'" @click.native="daokuan(index)">到款确认</el-col>
      </el-row>

点击事件,弹窗点击确定,则改变状态

daokuan(index) {
      Dialog.confirm({
        title: "您确认已到款吗?"
      })
        .then(() => {
          this.contentlist[index].state = "已完成";
          Vue.set(this.contentlist, index, this.contentlist[index]);
        })
        .catch(() => {
          // on cancel
        });
    }

如图,点击按钮到款确认,按钮则会变成灰色已到款确认,且状态也能同时被更新在这里插入图片描述

Logo

前往低代码交流专区

更多推荐