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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐