vue禁用与启用以及点击弹出提示框

一·，

    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