鍍金池/ 問答/HTML/ vue 數(shù)據(jù)更改之后如何使編輯按鈕失效

vue 數(shù)據(jù)更改之后如何使編輯按鈕失效

圖片描述

圖片描述

點(diǎn)擊編輯按鈕選擇處理結(jié)果 我用$set會(huì)局部刷新頁面數(shù)據(jù)
現(xiàn)在想讓在處理結(jié)果為已處理時(shí)讓編輯按鈕失效 求大佬們給個(gè)思路

代碼如下:
<template>

<div class="alarmDriver" id="driver">

<div class="s_table">
  <div>
    <el-table :data="driveralarmlist.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column
        prop="name"
        label="司機(jī)"
      >
      </el-table-column>
      <el-table-column
        prop="age"
        label="年齡"
      >
      </el-table-column>
      <el-table-column
        prop="tell"
        label="電話"
      >
      </el-table-column>

      <el-table-column
        prop="heartbeat"
        label="心率"
      >
      </el-table-column>
      <el-table-column
        prop="bloodpv"
        label="血壓"
      >
      </el-table-column>
      <el-table-column
        prop="bloodps"
        label="血氧"
      >
      </el-table-column>

      <el-table-column
        prop="alarmtype"
        label="報(bào)警類型"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        label="報(bào)警時(shí)間"
      >
      </el-table-column>
      <el-table-column
        prop="processingtype"
        label="處理結(jié)果"
      >
      </el-table-column>
      <el-table-column
        prop="right"
        label="操作"
      >

        <template slot-scope="scope">
          <!--:disabled="isDisable"-->
          <el-button @click="handleClick(scope.row)" type="text" size="small" >編輯</el-button>

        </template>

      </el-table-column>

    </el-table>
  </div>

</div >

<div class="dropbox">
  <div class="dropcont">
    <p class="u_tit">處理結(jié)果</p>
    <div class="selectbox">
        <div class="dropinput">
          <input type="text" placeholder="請選擇處理結(jié)果" readonly id="input" data-type="" >
        </div>
      <ul class="drop_list"  >
        <li v-for="(item,index) in proResults"> {{item.label}}</li>

      </ul>
    </div>
    <div class="btn_box">
      <el-button type="primary"class="Determine" @click="Determine(damid)">確定</el-button>
      <el-button class="quxiao">取消</el-button>
    </div>
  </div>
</div>

</div>

</template>

<script>
import '../assets/js/jquery-1.7.min'

export default {

name: "alarmDriver",
props:["driveralarmlist"],


data() {
  return {


    damid:'',
    name:'',
    proResults:[   //下拉框的值
      {
        value:0,
        label:"未處理"
      },{
        value:1,
        label:"處理中"
      },{
        value:2,
        label:"已處理"
      }
    ],

    dialogFormVisible: false,

    form: {
      region: '',
    },
 
  }
},
methods: {

  Determine(damid,name){ //確定按鈕  
   
    var _this=this

    var value=$('#input').attr('name') //input框里的值
  
    this.$http.post('').then(function (res) {

      var updatelist = res.data
      var processingtypea=res.data.processingtype //后臺(tái)返回給我的處理方式
      if(processingtypea==0){
        processingtypea="未處理"

      }else if(processingtypea==1){
        processingtypea="處理中"

      }else{
        processingtypea="已處理"
      }
      var type= updatelist.TYPE
      if(type== true){
        for(var i=0;i<_this.driveralarmlist.length;i++){
          var damida=_this.driveralarmlist[i].damid
          var name = _this.driveralarmlist[i].name
          var age = _this.driveralarmlist[i].age
          var tell = _this.driveralarmlist[i].tell
          var heartbeat= _this.driveralarmlist[i].heartbeat
          var bloodpv = _this.driveralarmlist[i].bloodpv
          var bloodps =_this.driveralarmlist[i].bloodps
          var alarmtype = _this.driveralarmlist[i].alarmtype
          var time = _this.driveralarmlist[i].time
          if(damid==damida){  //當(dāng)更改處理方式時(shí) 自動(dòng)更新視圖
            _this.$set(_this.driveralarmlist,i,{name:name,age:age,tell:tell,heartbeat:heartbeat,bloodpv:bloodpv,bloodps:bloodps,alarmtype:alarmtype,time:time,processingtype:processingtypea})

          }
        }
      }else{
        alert("更改失敗")
      }
    })
  },
  handleClick(row){

    var _this=this
    $('.dropbox').css('display','block')
    _this.damid=row.damid
    _this.name = row.name

    this.chose()
  },
  chose(){
      $('#input').click(function(){
        $('.drop_list').css('display','block')
        return false;
      })
      $('.drop_list li').click(function(){
          $('#input').val($(this).html())

          $('#input').attr('name',$(this).index())
          $('.drop_list').css('display','none')
      })
    $('.quxiao').click(function(){
      $('.dropbox').css('display','none')
    })
    $('.Determine').click(function(){
      $('.dropbox').css('display','none')
    })
    $('.selectbox').click(function(){

      $('.drop_list').css('display','none')

    })

  }
},

}
</script>

回答
編輯回答
網(wǎng)妓

:disabled="scope.row.processingtype=='已處理'" 成了

2017年7月22日 05:13
編輯回答
尤禮

兩個(gè)方法
1.綁定disabled控制是否禁用
2.綁定v-if='demo' 控制是否顯示

2017年12月2日 23:03
編輯回答
夏木
<template slot-scope="scope">
  <!--:disabled="isDisable"-->
  <el-button
    :disabled="scope.row.processingtype===2" // 這行
    @click="handleClick(scope.row)" 
    type="text" size="small" >編輯</el-button>
</template>
2017年4月7日 23:39