1、遇到要在 Element-ui 的 Table 中添加圖片和序號的問題：

A、想要在Table里面添加的圖片或屬性情況為：

B、但如何添加就是一個問題：
經過查詢發現：通過 slot-scope="scope" 屬性操作是可以在 table 欄中添加相關屬性值的(相關文檔也有敘述);

// 地址：https://element.eleme.cn/#/zh-CN/component/table
// 此時在日期欄下添加了一個圖標和date值；
// 即：通過 slot-scope="scope" 來添加相關屬性值是可以的；

2、解決方案：用 slot-scope="scope"屬性

A、關于 Element-ui 中 'el-table' 的理解：

其一、屬性 :data="tableData" 表示是：動態綁定；
在 el-table 中，:data="tableData" 是動態綁定的對象數組，在 Table 中每一個 cell (小格子) 里面顯示的數據都是從動態綁定的對象數組中拿到的數據；

其二、el-table-column 來決定 el-table 的列數：
在 里面的 el-table-column 個數來決定 el-table 的列個數，且用 lable 屬性來決定列名；

其三、:data="tableData" 中的對象個數決定 el-table 的行數：

在 tableData 對象數組里面的 {對象}個數來決定 el-table 的行個數，且用 el-table-column 中的 prop 屬性來將該列的數據與tableData數組所有對象中的相關屬性綁定;
可以理解為：tableData[$index].adress 來拿到數據；

// 例如： prop="address" 語句就表示：將該 prop="address" 列的數據與tableData數組所有對象中的address屬性綁定;

// prop="address" 所在列：

// 綁定的tableData數組所有對象中的address屬性;

B、關于slot-scope="scope"屬性的理解：

其一、slot-scope="scope"本質上就是一個插槽，簡單說就是先在 el-table 中占一個位置，然后再等待操作往里面填值即可；

其二、在scope.row.address語句中，row 是 scope 的內置屬性，應該還會有column, $index 等內置屬性；

我理解為：給 label="地址" 列中的每個 row 中添加 tableData 數組所有對象中的 address 屬性;

其三、此時的所占位置的 scope 并不是代表著 table，可以將scope.row理解為一個整體，從而來存放 tableData 所有數組對象中的 address 屬性值；

3、通過 slot-scope="scope"實現插入圖片的過程：

A、通過引入 slot-scope="scope" 屬性的代碼：

// template 中的代碼展示：
<template>
  <div class="container">
    <el-table
      :data="tableData"
      :height="tabHeight"
      :width="tabWidth"
      class="container-table"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"  width="350"> </el-table-column>
      <el-table-column prop="process" label="">
        <template slot-scope="scope">
          <div
           class="table_right"
           v-for="(iterm, indx) in scope.row.process" 
           :key="indx" 
           style="float: left; color: black"
           >
           <div class="span_bg">
             <span class="table-circle">{{ iterm.order }}</span>
             <span class="t_value"> {{ iterm.name }}</span>
           </div>
           <span class="el-icon-right"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

B、做出來的頁面展示(插入的圖片及文字)：

4、小結：

其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482