vue修改el-table-column上下margin外边距调整行间距方法教程

在vue中table表格中数据太多，看起来臃肿，需要margin调整上下边距，直接使用margin不生效，是因为display使用的是table属性，所以我们要利用table特性来进行处理。

效果：

.el-table {width: 100%;margin-bottom: 20px;&::before {display: none;}.el-table__body {/* //-webkit-border-horizontal-spacing: 13px;  // 水平间距 *//*  // 垂直间距 设置的是行间距 */-webkit-border-vertical-spacing: 10px;}thead th {font-size: 14px;color: #575757;&:nth-last-child(2) {border-right: 1px solid rgba(0, 0, 0, 0.1) !important;border-radius: 0 5px 5px 0;right: 1px;}}thead th,.el-table__row td {font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;padding: 10px 0;&:first-child {border-radius: 5px 0 0 5px;}}.el-table__row > td {font-size: 12px;color: #333333;&:last-child {border-radius: 0 5px 5px 0;}}.el-table__body tr:hover > td.el-table__cell {background-color: rgba(0, 110, 255, 0.05);}.el-table__fixed::before {display: none;}
}

全部代码：

<template><div class="container1"><div class="button-group"><el-button class="custom-button">档案总数</el-button><el-button class="custom-button">累计借出数量</el-button><el-button class="custom-button">当前在库</el-button><el-button class="custom-button">当前借出数量</el-button></div><el-table:data="tableData"borderstyle="width: 100%":header-cell-style="{background: '#03050c',color: '#ffffff',border: '#03050c',}":cell-style="{background: 'rgba(45, 67, 115,0.9)',border: '#03050c',color: '#EAEFFF',}":row-class-name="{background: '#2D4373',border: '#03050c',margin: '0px',color: '#EAEFFF',}"><el-table-column prop="index" label="序号" width="60"></el-table-column><el-table-column prop="name" label="工具具名称"></el-table-column><el-table-column prop="type" label="工具具类型"></el-table-column><el-table-column prop="status" label="工具具状态"></el-table-column><el-table-column prop="entryTime" label="入库时间"></el-table-column><el-table-column prop="inspectTime" label="检验时间"></el-table-column><el-table-columnprop="nextInspectTime"label="下次检验时间"></el-table-column><el-table-column prop="inStock" label="是否在库"></el-table-column><el-table-column prop="borrower" label="借用人"></el-table-column><el-table-column prop="borrowTime" label="借用时间"></el-table-column></el-table></div>
</template><script>
import { SeamlessScroll } from "vue-seamless-scroll";
export default {name: "CkDilog",components: {SeamlessScroll,},// props: {//   tableData: {//     type: Array,//     required: true,//   },// },data() {return {testArray: [], // 初始化为空数组};},methods: {fetchData(states) {listBoardtools({ states }).then((response) => {if (response && response.total) {this.testArray = response.rows;}}).catch((error) => {console.error("Error fetching data with states:", states, error);});},classOption: {singleHeight: 30,},},
};
</script><style scoped>
.container1 {/* background-color: #122909; */height: 80vh;padding: 10px;color: white;position: relative;/*background-color: gainsboro;*/overflow: hidden;
}.button-group {display: flex;justify-content: center;
}.custom-button {border-radius: 0;background-color: #1c4a6e;font-weight: 500;font-size: 16px;color: #28a0d9;line-height: 20px;text-shadow: 0px 0px 10px rgba(4, 59, 187, 0.88);border: none;padding: 6px 20px;background-image: url("~@/assets/images/WarehouseHomepage/Dlalogbt.png");
}.custom-button:hover {background-color: #2d6186;color: white;
}.el-table {border: 1px solid #0c1430;background-color: #000000;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {content: "";position: absolute;background-color: #060607;z-index: 1;
}
.el-table th {background-color: #163458 !important;color: white !important;border: 1px solid #03050c;
}.el-table td {/* background-color: #0f2740 !important; */color: white !important;border: 1px solid #03050c;
}.cell-space /deep/ .el-table .el-table__body-wrapper .el-table__body {border-collapse: separate;border-spacing: 5px;
}.el-table {width: 100%;margin-bottom: 20px;&::before {display: none;}.el-table__body {/* //-webkit-border-horizontal-spacing: 13px;  // 水平间距 *//*  // 垂直间距 设置的是行间距 */-webkit-border-vertical-spacing: 10px;}thead th {font-size: 14px;color: #575757;&:nth-last-child(2) {border-right: 1px solid rgba(0, 0, 0, 0.1) !important;border-radius: 0 5px 5px 0;right: 1px;}}thead th,.el-table__row td {font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;padding: 10px 0;&:first-child {border-radius: 5px 0 0 5px;}}.el-table__row > td {font-size: 12px;color: #333333;&:last-child {border-radius: 0 5px 5px 0;}}.el-table__body tr:hover > td.el-table__cell {background-color: rgba(0, 110, 255, 0.05);}.el-table__fixed::before {display: none;}
}
</style>