526互联

vue按钮禁用

发布时间 2023-04-16 18:52:40作者: Dinesaw

一个按钮的动态禁用设置是如此多坑

必须要用到prop、data

prop来绑定其属性disabled，data是因为prop属性的内容不可改变。

<template>
  <div>
    <el-button type="success" size="small" @click="check">龟龟</el-button>
  <el-button type="success" size="small"  :disabled="flagBtn">查询</el-button>
  <!-- <el-button type="success" size="small" :disabled="btnDis"  @click="change">查询</el-button> -->
  </div>
</template>

<script>


export default {
  props: {
    disabled: {
      type:Boolean,
      default:true
    }
  },
  data() {
    return{
      flagBtn :this.disabled
    }
   
  },
  methods: {
    check(){
      // alert(this.disabled);
      // alert(this.flagBtn);
      this.flagBtn = false
      
    }
    
  }

  
};
</script>

<style>
</style>