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

系列文章目录文章目录系列文章目录前言一、添加表格二、修改表头的颜色及每行的颜色三、表格中引入图片四、滑动条改变前言本文主要是关于如何在vue的el-table中去添加图片一、添加表格此处是引用的element官网的表格来实现的。element官网<el-table-column prop="date" label="日期" width="180" align="center" header-

北漂研究生

17359人浏览 · 2021-02-05 23:02:40

北漂研究生 · 2021-02-05 23:02:40 发布

系列文章目录

前言

本文主要是关于如何在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;
    }```