在element plus的＜el-table＞中显示本地图片

原创已于 2023-06-07 23:50:38 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#element plus #vue3

于 2023-06-07 22:57:16 首次发布

该代码段展示了一个使用Vue.js和ElementUI实现的数据表格，包含图片展示、名称、地址和日期列，以及编辑和删除操作。数据动态加载，图片源通过require和ES6模板语法拼接。

直接代码走起，一目了然

<template>

  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >

      <el-table :data="tableData" stripe style="width: 100%" :fit="true">
        <el-table-column label="封面" width="120" prop="cover">
          <template #default="scope">
            <div style="width: 110px;height: 110px;display: flex;align-items: center;">
              <el-image fit="fill" :src="require(`../../assets/image/${scope.row.cover}`)"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="200"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column prop="date" label="日期" width="100" />
        <el-table-column label="Action">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </a-layout-content>
  </a-layout>

</template>
<script>


const tableData = [
  {
    cover:'js.jpg',
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'java.jpg',
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'vue.jpg',
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'js.jpg',
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];

export default {
  data(){
    return {tableData};
  },
  methods:{
    handleEdit( index, row) {
      console.log(index, row);
    },
    handleDelete (index, row){
      console.log(index, row)
    }
  }
};
</script>

最核心的两个点：

1 src属性中，require里面的内容必须拼接，使用了ES6的快捷拼接`${ }`语法

2 scope.row和scope.$index