el-table数据渲染 点击按钮 实现不刷新 呈现数据状态

实践文章

个人开发问题,记录一下,可能会存在不完美,欢迎大佬追加!!!,

html片段 重点 标记- - ->动态显示区域

 
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="user_name" label="姓名">el-table-column>
      <el-table-column prop="user_code" label="编码">el-table-column>
      <el-table-column prop="need_recheck" label="验证状态">
        
        <template slot-scope="scope">
          <el-button type="info" plain disabled  class="status1" size="mini" >{{scope.row.need_recheck !=1 ? "已关闭" :"已开启"}}el-button>   
        template>
      el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
        
          <el-button @click="handleClick(scope.row,scope.$index)" size="mini" type="success">开启el-button>
          <el-button @click="closeClick(scope.row,scope.$index)" size="mini" type="danger">关闭el-button>
          <el-button @click="resetSafety(scope.row)" type="primary" size="mini">重置el-button>
        template>
      el-table-column>
    el-table>
    
  

js 代码 $set方法

 handleClick(row, index) {
      console.log(row, index, "开启操作");

      var index1 = index;
      var userCode = row.user_code;
      var that = this;
      this.$http.ajax({
        url: that.$api.config.addSafety,
        method: "post",
        data: {
          need_recheck: 1,
          user_code: userCode
        },
        success(res) {
          if (res.data.code == 0) {
          // $set方法
             that.$set(that.tableData[index1],'need_recheck',1);
            // that.aaa();
          }
        }
      });
    },

显示结果

图片:
点击按钮 开启关闭 按钮 实现不刷新 呈现数据状态