實現方法分位三步：

1. 在template中設定2個按鈕，通過v-if ，v-show來控制；
2. data中設定按鈕的預設值；
3. methods中控制點選按鈕切換效果。

<templhttp://www.cppcns.comate>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="200">
    </el-table-column>
     <el-table-column
      prop="state"
      label="狀態"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
      <template slot-scope="scope">
            <el-input placeholder="請輸入內容" v-show="scope.row.show" v-model="scope.row.姓名">
            </el-input>
            <span v-show="!scope.row.show">{{scope.row.姓名}}
        
 
    </span>
        </template>
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市區"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300"
       :show-overflow-tooltip="true" >
    </el-table-column>
    <el-table-column
      prop="zip"
     www.cppcns.com
 
 label="郵編"
      width="120">
    </el-table-column>
    <el-table-column
      fixebtaIlzId="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">檢視</el-button>
        <el-button @click="scope.row.show =true" type="text" size="small">編輯</el-button>
        <el-button @click="scope.row.show =false" type="text" size="small">儲存</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-if="btnStatus == 0">啟用</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-show="btnStatus == 1">禁用</el-button>

      </template>

    </el-table-column>
  </el-table>
</template>

<script>
  www.cppcns.com
 
export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },changeStatus(){
                this.btnStatus = this.btnStatus === 0 ? 1 : 0;
            }
    },data() {
      return {
          btnStatus: 0,tableData: [{
          date: '2016-05-02',name: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄上海市普陀區金沙江路 1518 弄',zip: 200333,show:true
        },{
          date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄',show:true
        }]
      }
    }
}
</script>

另外，注意下，data中，按鈕的預設值要放在data下，圖1。

不能放在table中，否則會按鈕顯示不出來，且會報錯，圖2：Property or method "btnStatus" is not defined on the instance but referenced during render.

這個報錯原因是：在template裡面或者在方法裡面使用了 “btnStatus” ，但是在data裡面沒有定義。

到此這篇關於中點選切換按鈕功能之點啟用後按鈕變為禁用的文章就介紹到這了,更多相關vue點選切換按鈕內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！