1、遇到要在 Element-ui 的 Table 中添加图片和序号的问题：

A、想要在Table里面添加的图片或属性情况为：

elementui s elementui slot-scope_数据


B、但如何添加就是一个问题：

经过查询发现：通过 slot-scope="scope" 属性操作是可以在 table 栏中添加相关属性值的(相关文档也有叙述);

elementui s elementui slot-scope_数组_02


// 地址：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 (小格子) 里面显示的数据都是从动态绑定的对象数组中拿到的数据；

elementui s elementui slot-scope_数组_03

其二、el-table-column 来决定 el-table 的列数：

在 <template></template> 里面的 el-table-column 个数来决定 el-table 的列个数，且用 lable 属性来决定列名；

elementui s elementui slot-scope_数据_04

其三、:data="tableData" 中的对象个数决定 el-table 的行数：

在 tableData 对象数组里面的 {对象}个数来决定 el-table 的行个数，且用 el-table-column 中的 prop 属性来将该列的数据与tableData数组所有对象中的相关属性绑定;

可以理解为：tableData[$index].adress 来拿到数据；

elementui s elementui slot-scope_动态绑定_05

// 例如： prop="address" 语句就表示：将该 prop="address" 列的数据与tableData数组所有对象中的address属性绑定;

// prop="address" 所在列：

elementui s elementui slot-scope_动态绑定_06


// 绑定的tableData数组所有对象中的address属性;

elementui s elementui slot-scope_数组_07


B、关于slot-scope="scope"属性的理解：

其一、slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可；

elementui s elementui slot-scope_数据_08


其二、在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>

elementui s elementui slot-scope_elementui s_09

B、做出来的页面展示(插入的图片及文字)：

elementui s elementui slot-scope_动态绑定_10