本文主要是关于如何在vue的el-table中添加图片，动态添加图片，以及图片的放大。

最新推荐文章于 2025-03-16 22:17:02 发布

北漂研究生

最新推荐文章于 2025-03-16 22:17:02 发布

阅读量2w

点赞数 23

分类专栏： vue 文章标签： javascript vue elementui

本文链接：https://blog.csdn.net/qq_19280295/article/details/113705144

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何在Vue的Element UI组件库中使用el-table组件进行表格布局，并展示如何添加表格、修改表头颜色和行颜色、在表格中插入图片以及实现滑动条样式。通过实例代码展示了表格的样式调整，包括文字居中、背景色设置以及图片展示的两种方法。此外，还提供了滑动条的自定义样式，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

前言

本文主要是关于如何在vue的el-table中去添加图片

一、添加表格

此处是引用的element官网的表格来实现的。
element官网

<el-table-column prop="date" label="日期" width="180" align="center" header-align="center" >

其中：align=‘enter’可以将每行的文字居中，header-align="center"可以将表头的文字进行居中。

二、修改表头的颜色及每行的颜色

此处需要在全局格式中引用

 <el-table
    :data="tableData"
    height="400"
    stripe
    style="width: 100%;"
    :row-style="tableRowStyle"
    :header-cell-style="tableHeaderColor" 
    >

在methods中写入样式：代码如下：

tableRowStyle({ row, rowIndex }) {
      return 'background-color: #F7F6Fd;'   
      },
      // 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #303133;font-weight: 500;font-size: 20px;' //font-size: 20px;为字体大小设置
      }
      },

其中：font-size: 20px;为字体大小设置

三、表格中引入图片

在需要引入图片的表格里面添加一下代码
代码如下：
第一种：

<el-table-column  label="精品图片">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.product.cover" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="scope.row.product.cover" style="width: 30px;height: 30px">
            </el-popover>
        </template>
      </el-table-column>

在这里插入图片描述

第二种：

<el-table-column prop="address" label="图片" sortable width="180" align="center" header-align="center">
     <template slot-scope="scope">
          <el-image style="width: 100%; height: 100px" :src="scope.row.address" :preview-src-list="[scope.row.address]" :key="scope.row.id">
            <div slot="error" class="image-slot">
               <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
    </el-table-column>

在这里插入图片描述

其中：:src=“scope.row.address” :preview-src-list="[scope.row.address]" :key=“scope.row.id” 中的row后面参数设置的话为return里面数据的类型：
在这里插入图片描述
里面的数据也可以写成动态的：

地址一定要require，要不然没法显示。

四、滑动条改变

效果如下：
在这里插入图片描述

在style中添加一下代码

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 10px; /*滚动条宽度*/
        height: 8px; /*滚动条高度*/
        background-color: rgb(248, 237, 237);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
       
        background-color: rgb(207, 191, 191); /*滚动条的背景颜色*/
        border-radius: 30px;
    }```