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">
        <!--scope.$index  获取触发事件的行-->
          <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();
          }
        }
      });
    },

显示结果

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