el-table資料渲染 點選按鈕 實作不重新整理 呈現資料狀态

el-table $set方法,不重新整理, 呈現改變資料狀态

• 實踐文章
• • html片段 重點 标記- - ->動态顯示區域
• js 代碼 $set方法
• • 顯示結果

實踐文章

個人開發問題,記錄一下,可能會存在不完美,歡迎大佬追加!!!,

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();
          }
        }
      });
    },
           

顯示結果

圖檔:

點選按鈕 開啟關閉 按鈕 實作不重新整理 呈現資料狀态