VUE--Element-UI在table表格中渲染图片、获取动态表格title和内容

1、直接获取图片进行渲染

<!-- 直接渲染图片的方法 -->
      <template>
        <!-- 循环列表，用索引做key，便于插入数据管理（对应列内容字段名称） -->
        <div v-for="item in iconImgInfos" :key="item.index" style="text-align:left;float: left">
          <!-- 渲染图片iconImgInfos数组内有iconImgLarge键值，所以用遍历的值item.iconImgLarge获取数据 -->
          <img :src="item.iconImgLarge" alt="图片加载失败" width="90px" height="90px" title="用戶頭像" style="text-align:left">
        </div>
      </template>

2、在table内获取图片进行渲染

<!-- 在表格内渲染图片的方法 -->
      <template>
        <!-- 获取服务端的图片数组iconImgInfos（列表类型）-->
        <el-table :data="iconImgInfos" style="width: 100%">
          <!-- 填写获取数组内图片的key值prop="iconImgLarge" -->
          <el-table-column prop="iconImgInfos" label="头像图片">
            <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。 -->
            <!-- slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template slot-scope="props"来获取插槽上的属性值，获取到的值是一个对象。 -->
            <template slot-scope="scope">
              <!-- scope.row获取当前行所有数据 作用域插槽获取当前行的数据（可以是图片连接如下：:src="scope.row.iconImgLarge"） -->
              <el-image style="width: 50px; height: 50px" :src="scope.row.iconImgLarge" fit=""></el-image>
            </template>
          </el-table-column>
        </el-table>
      </template>

3、动态表格title及内容

<el-card>
  <el-row>
    <el-col>

	    <el-table style="width: 100%" border :data="tableData">
	      <template v-for="(item,index) in tableHead">
	        <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index"
	          v-if="item.column_name != 'id'">
	
	        </el-table-column>
	      </template>
	    </el-table>

    </el-col>
  </el-row>
</el-card>

script内：

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
        tableHead: [{
      
      
            column_name: "column_name",
            column_comment: "姓名"
          },
          {
      
      
            column_name: "column_age",
            column_comment: "年龄"
          },
          {
      
      
            column_name: "column_sex",
            column_comment: "性别"
          }
        ],
        tableData: [{
      
      
            column_age: '3',
            column_name: '张三',
            column_sex: '女'
          },
          {
      
      
            column_age: '3',
            column_name: '李四',
            column_sex: '女'
          },
          {
      
      
            column_age: '3',
            column_name: '王五',
            column_sex: '女'
          },
        ],
      };
    },
  };
</script>