elementUI table preview image

The table has a picture show, now need to click on the picture, a preview of the picture, elementui used in previewSrcList do image preview,

But the tests found that, regardless of the table, click that picture, the big picture is a preview from the first picture to start preview;

Behind each picture by changing the picture of the binding order list to solve the second problem;

Page displays:

<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 = []; 
      // table data drawerTableList 
      // address of each image acquired 
      for (var i = 0; i <this.drawerTableList.length; i ++) { 
        this.list.push (this.drawerTableList [I] .path) 
      } 

      // change the binding list for each image based on the image of the image sequence order (index) 
      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 = behindArr.concat List (frontArr)
        this.drawerTableList [I] = .list List; 
      } 
      
    },