第018个
el-table 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 vue在使用element UI table的是经常要用到的，由于原有的表头和单元格的样式不能满足项目的需要，需要自己来自定义样式。同时这里也做了个overflow-y的设置，让更多的内容在滚动条滑动下展示。
文章目录
- 示例效果图
- 示例源代码（共78行）
- 核心代码
示例效果图
示例源代码（共78行）
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-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.data
console.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”
