el-table右侧有一块空白,为进度条,影响观看

当表格数据较少时,进度条显得空旷影响观感。文章提供了CSS样式来隐藏进度条,仅在数据超出最大高度时显示滚动条,以保持表格整洁。通过设置`.el-tableth.gutter`,`.el-tablecolgroupcol[name=gutter]`和`.el-table__body`的样式,可以实现这一效果。
摘要由CSDN通过智能技术生成

给table设置了进度条,只有少量数据的时候很影响观感,感觉table没有盛满

原因

白色透明的空间是进度条,需要隐藏进度条

方法

如果数据过多,在最大高度内展示不开,就会自动加一个滚动条,进行滚动展示。

如果数据很少,没有达到最大高度,那么右侧不应该有滚动条,和一切干扰列。

css样式
/deep/ .el-table th.gutter{
  display: none;
  width:0
}
/deep/ .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
/deep/ .el-table__body{
  width: 100% !important;

}

在 Vue3 中,要在 `el-table` 表格中添加空白行,你可以通过 `span-methods` 配置项结合自定义的 `row-class-name` 或者直接操作数据数组来实现。这里有两个常见的方式: **方法一:使用 span-methods 和 row-class-name** ```html <template> <el-table :data="tableData" :span-method="objectSpanMethod"> <!-- 其他表头、列等配置 --> <el-table-column type="index"></el-table-column> <!-- 添加空白行的列,比如添加一个占位列 --> <el-table-column label="占位" width="100px" /> </el-table> </template> <script setup> import { ref } from 'vue'; const tableData = ref([ // ...正常的数据 ]); // 自定义方法判断是否需要插入空白行 function objectSpanMethod({ row, column, rowIndex }) { if (rowIndex % 2 === 0) { // 每隔一行添加一个空白行 return { rowspan: 2 }; } return {}; } // 如果想给空白行添加样式 const rowClassName = (row, index) => { if (!row.data) { // 判断是否为空白行 return 'empty-row'; } return ''; }; </script> <style scoped> .empty-row { /* 可以为空白行设置特定的样式 */ background-color: #f5f5f5; } </style> ``` **方法二:直接操作数据数组** 在数据加载完成或更新时,在数据数组中手动添加空白行,然后使用 `v-for` 渲染。 ```html <template> <el-table :data="tableData" :key="item.id"> <!-- ...其他配置 --> </el-table> </template> <script setup> import { ref, computed } from 'vue'; const tableData = ref([]); // 在计算属性里添加空白行 const formattedTableData = computed(() => { const result = []; for (let i = 0; i <= tableData.value.length; i++) { if (i !== tableData.value.length) { result.push(tableData.value[i]); } else { result.push(null); // 或者你可以创建一个空的对象 {} } } return result; }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值