备注按钮

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

    < template slot-scope = "scope" >

        < div @click = " showRemark ( scope . row ) " v-show = " ! remarkRobotVisible [ 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 >

        </ div >

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

                        v-model = " modifyRobotRemarkParam . robotErrorRemark "

                        @blur = " saveRemark ( scope . row ) " v-show = " remarkRobotVisible [ scope . row . errorId ] " >

         </ el-input >

      </ template >

</ el-table-column >

  data(){

        remarkRobotVisible: {},

  }

showRemark ( row ) {

        if ( this . remarkedit ) {

        return ;

}

    this . modifyRobotRemarkParam . robotErrorRemark = row . errorRemark ;

    this . remarkedit = true ;

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

},

saveRemark ( row ) {

    this . modifyRobotRemarkParam . robotErrorId = row . errorId ;

    modifyRobotRemark ( this . modifyRobotRemarkParam ). then (() => {

        this . queryRobotListData ();

        this . robotRemarkDialogVisible = false ;

        this . $notify ({

        title: "成功" ,

        message: "修改备注成功" ,

        type: "success" ,

        duration: 2000

        });

    });

    this . remarkedit = false ;

    this . modifyRobotRemarkParam = {};

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

},

 

 

 

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