elementUI 表格中預覽圖片


表格中有一列顯示的圖片,現需要點擊圖片,預覽該圖片,使用的elementui中的previewSrcList做的圖片預覽,

但是測試發現,無論點擊表格中的那張圖片,預覽的大圖都是從第一張圖片,開始預覽;

后面通過更改每張圖片綁定的圖片list的順序,解決了次問題;

頁面顯示:

<el-table-column property="path" label="圖片" align="center">
            <template slot-scope="scope">
              <el-image 
                style="width: 50px; height: 50px"
                :src="scope.row.path" 
                :preview-src-list="scope.row.list"  
                >
              </el-image> 
            </template>
          </el-table-column>

 js:

getDrawerTableList(data) {
      this.drawerTableList = data;
      this.list = [];
      // 表格數據  drawerTableList
      //獲取每張圖片的地址
      for(var i = 0 ; i < this.drawerTableList.length ; i ++){
        this.list.push(this.drawerTableList[i].path)
      }

      //根據圖片順序(index)更改每張圖片綁定的list的圖片順序
      for(var i = 0 ; i < this.drawerTableList.length ; i ++){
        // this.list.push(this.drawerTableList[i].path)
        var container = this.list;

        var frontArr = container.slice(0,i);
        var behindArr = container.slice(i,this.drawerTableList.length);
        var list = behindArr.concat(frontArr) 
        this.drawerTableList[i].list = list;
      }
      
    },

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM