使用element-ui图片的显示

**table中代码如下:

  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
    prop="images"
    label="图片"
    width="180">
    <template slot-scope="scope">
      <img :src="scope.row.src" style="width:100px;height:50px;"/>
    </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="number"
      label="商品数量"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="商品单价"
      width="180">
    </el-table-column>
    <el-table-column
      prop="money"
      label="商品金额"
      width="180">
    </el-table-column>
  </el-table>

` 此处template slot-scope为固定写法(scope相当于一条数据对象)
在img中使用scope（三个属性value、row、index），通过row（本条数据的数据对象）获取src字段的值

Vue data代码如下:`

data() {
    
    
          return {
    
    
          	 msg : 'vue测试监听查询购物车数量以及金额变化',
             // input:'123'
                   tableData: [{
    
    
          src: './static/images/苹果.jpg',
          name: '苹果',
          number:1,
        }, {
    
    
          src:'./static/images/车厘子.jpg',
          name: '车厘子',
          number:2,
        }, {
    
    
          src:'./static/images/火龙果.jpg',
          name: '火龙果',
          number:3,
        }, {
    
    
          src:'./static/images/百香果.jpg',
          name: '百香果',
          number:4,
        }]
          }
       	}`

效果图: