v-show的用法

首先：在data(){ return{} } 里面定义remarkChargerVisible: {},

< el-table-column align = "errorRemark" prop = "menu" label = "备注情况" >

          < template slot-scope = "scope" >

          < span @click = " showRemarkCharger(scope.row) " v-show = " ! remarkChargerVisible[scope.row.errorId] " >

               < el-popover v-if = " scope.row.errorRemark " placement = "top-start" width = "200" trigger = "hover" >

                     < span > {{scope.row.errorRemark}} </ span >

                           < span slot = "reference" > {{scope.row.errorRemark}}

                                    < i class = "el-icon-edit" ></ i >

                           </ span >

              </ el-popover >

             < span style = "color:#B0E2FF" v-if = " ! scope.row.errorRemark " > 添加备注 </ span >

         </ span >

        < el-input type = "textarea" :maxlength = " 30 " placeholder = "请输入内容"

                        v-model = " modifyChargerRemarkParam.chargerErrorRemark "          

                       @blur = " saveChargerRemark(scope.row) "

                        v-show = " remarkChargerVisible[scope.row.errorId] " >

       </ el-input >

      </ template >

</ el-table-column >

showRemarkCharger(row) {

    if ( this .remarkedit) { return ; }

    this .modifyChargerRemarkParam.chargerErrorRemark = row.errorRemark;

    this .remarkedit = true ;

    this .$set( this .remarkChargerVisible, row.errorId, true );

},

saveChargerRemark(row) {

   this .modifyChargerRemarkParam.chargerErrorId = row.errorId;

   modifyChargerRemark( this .modifyChargerRemarkParam).then(() => {

   this .queryChargerListData();

   this .chargerRemarkDialogVisible = false ;

   this .$notify({

        title: "成功" ,

          message: "修改备注成功" ,

         type: "success" ,

         duration: 2000

      });

  });

  this .remarkedit = false ;

  this .modifyChargerRemarkParam = {};

  this .$set( this .remarkChargerVisible, row.errorId, false );

},

转载于:https://my.oschina.net/u/4013226/blog/2907150