第018个
el-table 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 vue在使用element UI table的是经常要用到的，由于原有的表头和单元格的样式不能满足项目的需要，需要自己来自定义样式。同时这里也做了个overflow-y的设置，让更多的内容在滚动条滑动下展示。
文章目录
示例效果图示例源代码（共78行）核心代码示例效果图
示例源代码（共78行）
/** @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。* @Email: 2909222303@* @weixin: gis-dajianshi* @First published in CSDN* @First published time: -06-17*/<template><div class="container"><h3>vue+element UI：自定义el-table 表头和表格的样式 </h3><div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div><el-table :data="tableData" style="width: 100%;border: 1px solid #DDE1E6 ;border-radius: 4px;" height="380":header-cell-style="{ background: '#abf',color: '#404A53', padding: '0px 0px', textAlign: 'left',}":cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"><el-table-column prop="title" label="图片" width="180"><template slot-scope="scope"><el-image :src="scope.row.thumbnail_pic_s"></el-image></template></el-table-column><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="title" label="标题" ><template slot-scope="scope"> <div> <span>{{scope.row.title}}</span> </div> </template> </el-table-column></el-table></div></template><script>export default {data() {return {tableData: [],}},mounted() {this.getdata()},methods: {getdata() {let url = "/listdata"this.$request(url, {}, "GET").then((res) => {this.tableData = res.data.dataconsole.log(this.tableData)})},}}</script><style scoped>.container {width: 840px;height: 500px;margin: 50px auto;border: 2px solid orange;padding:5px 10px;}.author {line-height: 30px;color:#666;margin-bottom: 20px;background:#FDF5E6;font-size: 14px;}</style>
核心代码
表头:
:header-cell-style=“{ background: ‘#abf’,color: ‘#404A53’, padding: ‘0px 0px’, textAlign: ‘left’,}”
单元格：
:cell-style="{ padding: ‘8px 10px 8px 0’, textAlign: ‘left’ }
表格高度，超过部分滚动处理
height=“380”
