本文主要是关于如何在vue的el |
您所在的位置：网站首页 › 如何在表格里加照片 › 本文主要是关于如何在vue的el |
本文主要是关于如何在vue的el
|
系列文章目录
文章目录
系列文章目录前言一、添加表格二、修改表头的颜色及每行的颜色
三、表格中引入图片四、滑动条改变
前言
本文主要是关于如何在vue的el-table中去添加图片 一、添加表格此处是引用的element官网的表格来实现的。 element官网 其中：align=‘enter’可以将每行的文字居中，header-align="center"可以将表头的文字进行居中。 二、修改表头的颜色及每行的颜色
此处需要在全局格式中引用 在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;为字体大小设置 三、表格中引入图片在需要引入图片的表格里面添加一下代码 代码如下： 第一种：
第二种：
其中：: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; }``` |
里面的数据也可以写成动态的： 
【本文地址】
今日新闻 |
推荐新闻 |