一·，

    HTML

 <tr v-for="(item,index) in showData" :key="index">                       
       <td>{{item.developer_id}}</td>
       <td>{{item.developer_name}}</td>
       <td>{{item.developer_status==1?'正常':'鎖定'}}</td>
       <td>{{item.operator
 
}}</td>
       <td>{{item.operating_time}}</td>
       <td  class="operation">
          <a @click="singleLock(item.developer_id,item.developer_status,item)">{{item.developer_status==2?'啟用':'禁用'}}</a>
       </td>
  </tr>

 <!--禁用啟用彈框-->
        <div class
 
="enabled" v-show="disable">
            <enabled v-on:sure="sure" v-on:closeen="closeen" :standardna="standardna" :standardstu="standardstu"></enabled>
        </div>  

//彈框裡面的內容佈局
<div class="show-countBox">
        <div class="count-show-box">
            <h4 class
 
="name">確認</h4>
            <div style="background:#f5f5f5;">
                <div class="encontent">
                    <p>
                        確認{{this.standardstu==2? '啟用':'禁用'}}<span ></span>【{{this.standardna}}】標準?
                    </p>
                </div>
                <div class="btn">
                    <button class="flex_1" type="button" @click="closeen">取消</button>
                    <button class="flex_1" type="button" @click="sure">確定</button>
                </div>
            </div>
        </div>
</div>

二，script     

//主頁面的script
data(){
   return {
       disable:false
   }
},
methods:{
            closeen() {
                this.disable = false;
            },
            sure() {
                this.disable = false;
                //這個介面為啟用或者禁用成功改變狀態
                let _this = this;
                let checkInfo = {//給後臺傳入的引數};
                checkInfo = this.qs.stringify(checkInfo);
                this.$axios.post('呼叫的介面',checkInfo,res =>{
                      this.getData();  //這個呼叫主頁面的介面，即之後改變狀態後的資料                
                      this.checkedId = [];
                })    
            },
            singleLock(id,stat,item){
                this.standardna =item.developer_name;
                this.standardstu =stat;    
                console.log(this.standardstu);
                if(this.standardstu == 1) {
                    this.standardstu=="禁用"
                } else {
                    this.standardstu=="啟用"
                }
                this.disable = true;
                this.updateid=id;      
            }
}

//這個為子元件的script
export default {
        name: 'enabled',
        data() {
            return {

            }
        },
        props: ['standardna','standardstu'],

        mounted() {
            console.log(this.standardstu)
        },
        methods: {
            closeen() {
                this.$emit('closeen');
            },
            sure() {
                this.$emit('sure');  
            }
        },
        components: {

        }
    }

三，css

//子元件的css,樣式較多可簡化
<style>
      .encontent p{
        width: 500px;
        text-align: center;
        margin-bottom: 0.2rem;
    }
    .show-countBox {
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .count-show-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
        background: #f5f5f5;
        border-radius: 5px;        
    }
    
    .count-show-box h4 {
        padding: 10px 0;
        color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: center;
        background: #657eb4;
    }
    
    .count-show-box>:nth-child(2) {
        padding: 0.3rem;
        overflow: hidden;
    }
    
    .btn button:nth-child(2) {
        color: #fff;
        background: #465576;
        margin-left: 60px;
    }
    .btn{
        width: 60%;
        margin-left: 20%;
        display: flex;
    }
    .btn button{
        width: 0.8rem;
        height: 0.38rem;
        border-radius: 0.06rem;
        border: none;
    }   

</style>

                                                                                                                                                                                                                             -------END