欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element中el-table局部刷新的實(shí)現(xiàn)示例

 更新時(shí)間:2023年04月28日 11:00:33   作者:皮卡大人  
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

介紹:有一個(gè)簡(jiǎn)單的需求,一個(gè)表格點(diǎn)擊一個(gè)單元格的按鈕后,按鈕變成進(jìn)度條。

問題:如果只是用一個(gè)變量,然后配合v-if使用,一整列都會(huì)變成進(jìn)度條。

想法:把那個(gè)變量渲染進(jìn)去列表的每一行。但是…問題又出現(xiàn)了,值變了,但是表格沒有被重新渲染。

重點(diǎn):this.$set(this.tableData, index, row),更新表格這一行的值。理解這句代碼的意思,后面的可以不看。

隨便放點(diǎn)前端代碼就很長(zhǎng)了,不放又清除概況,簡(jiǎn)單看看吧。直接看el-progress那個(gè)標(biāo)簽的附近的,其他的瞅一下知道大概就好。

<el-table
              ref="theTable"
              :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
              class="content-datasheet-table"
              :cell-style="columnStyle"
            >
              <el-table-column label="開關(guān)名稱" prop="name" width="100px" align="center"> </el-table-column>
              <el-table-column label="開關(guān)ID" prop="sensorId" width="100px" align="center"> </el-table-column>
              <el-table-column label="電壓值(V)" prop="voltage" width="100px" align="center"> </el-table-column>
              <el-table-column label="電流值(A)" prop="current" width="100px" align="center"> </el-table-column>
              <el-table-column label="功率值(W)" prop="power" width="100px" align="center"> </el-table-column>
              <el-table-column label="狀態(tài)圖" align="center">
                <!-- eslint-disable-next-line -->
                <template slot-scope="scope">
                  <viewer style="transform:rotate(-90deg)" rotateTo="-90">
                    <img :src="viewPicture(scope.row)" min-width="70" height="70" :key="scope.$index" />
                  </viewer>
                </template>
              </el-table-column>
              <el-table-column label="刷新時(shí)間" prop="statusTime" width="160px" align="center"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-progress
                    v-if="scope.row.progressBar"
                    :text-inside="true"
                    :stroke-width="18"
                    :percentage="scope.row.speed"
                    status="success"
                  ></el-progress>
                  <el-button size="mini" v-else @click="updateConfirm(scope.$index, scope.row)">獲取最新狀態(tài)</el-button>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <!-- eslint-disable-next-line -->
                <template slot="header" slot-scope="scope">
                  <el-input v-model="search" size="medium" clearable placeholder="輸入開關(guān)ID搜索" />
                </template>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#2d8cf0"
                    nactive-color="#ff4949"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="閉合"
                    inactive-text="斷開"
                    @change="switchConfirm(scope.row.status, scope.row.sensorId)"
                  />
                </template>
              </el-table-column>
            </el-table>

前端頁面顯示圖:點(diǎn)擊獲取最新狀態(tài)之后,獲取變成進(jìn)度條,開始跑進(jìn)度。

    // 更新當(dāng)前某個(gè)開關(guān)的最新狀態(tài)
    handlePicture(index, row) {
      let params = "sensor_id=" + row.sensorId;
      this.progressSpeed(index, row);
      newestStatus(params).then(res => {
        row.speed = 100;
        this.$set(this.tableData, index, row);
        setTimeout(() => {
          row.progressBar = false;
          this.switchData();
        }, 3000);
      });
    },
    // 進(jìn)度條刷新
    progressSpeed(index, row) {
      row.speed = 0;
      row.progressBar = true;
      const sp = setInterval(() => {
        console.log();
        if (row.speed >= 99 ) {
          clearInterval(sp);
        } else {
         row.speed++; 
        }
        this.$set(this.tableData, index, row);
      }, 600);
    },

按鈕變成進(jìn)度條,獲取最新數(shù)據(jù),進(jìn)度條到99的時(shí)候就卡住,信息返回后,進(jìn)度條不管跑了都少都變成100,3S后變回原來的樣子。

到此這篇關(guān)于element中el-table局部刷新的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element el-table局部刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 基于vue實(shí)現(xiàn)微博三方登錄流程解析

    基于vue實(shí)現(xiàn)微博三方登錄流程解析

    這篇文章主要介紹了基于vue實(shí)現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • Vue配置marked鏈接添加target=

    Vue配置marked鏈接添加target="_blank"的方法

    這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法,文中給大家提到了vue實(shí)現(xiàn)類似target="_blank"打開新窗口的代碼,感興趣的朋友參考下吧
    2019-07-07
  • VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作

    VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作

    VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 淺析Vue中生命周期函數(shù)的區(qū)別

    淺析Vue中生命周期函數(shù)的區(qū)別

    生命周期分為四個(gè)對(duì)子,根據(jù)不同的情況使用不同的函數(shù),這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別,感興趣的小伙伴可以了解一下
    2023-08-08
  • element-ui配合node實(shí)現(xiàn)自定義上傳文件方式

    element-ui配合node實(shí)現(xiàn)自定義上傳文件方式

    這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 解決vue多層彈框時(shí)存在遮擋問題

    解決vue多層彈框時(shí)存在遮擋問題

    本文給大家介紹vue多層彈框時(shí)存在遮擋問題,解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽,然后修改z-index值,但是本思路只能解決首次問題,再次打開還會(huì)存在相同的問題,故該思路錯(cuò)誤,下面給大家?guī)硪环N正確的思路,一起看看吧
    2022-03-03
  • 通過vue-cli來學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問題

    通過vue-cli來學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問題

    這篇文章主要介紹了隨著Vue-cli來'學(xué)'并'改'Webpack之多環(huán)境配置和發(fā)布的相關(guān)知識(shí),本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求,先學(xué)習(xí)vue-cli生成的模版,然后在進(jìn)行相關(guān)修改,感興趣的朋友一起跟著小編學(xué)習(xí)吧
    2017-12-12
  • 如何為vue的項(xiàng)目添加單元測(cè)試

    如何為vue的項(xiàng)目添加單元測(cè)試

    這篇文章主要介紹了如何為vue的項(xiàng)目添加單元測(cè)試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • 安裝vue/cli后查看版本顯示找不到vue指令的解決

    安裝vue/cli后查看版本顯示找不到vue指令的解決

    這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue spa應(yīng)用中的路由緩存問題與解決方案

    vue spa應(yīng)用中的路由緩存問題與解決方案

    這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05

最新評(píng)論