ctrl + shift + c 选中滚动条,发现 antd-vue-table 的滚动条挂在了 .ant-table-body 这个类上。也就是说 .ant-table-body 的子元素的高度超高了。 继续使用浏览器开发工具观察 HTML 结构,为了将假的滚动条挂载到 antd-vue-table 上,我们可以选择 .ant-table-wrapper 这个元素,因为他的高度和宽度正好合适。
* 获取第一个表格的可视化高度 * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74) * @param {*} id 当前页面中有多个table时需要制定table的id*/exportfunctiongetTableScroll({ extraHeight, id }) {if(typeofextraHeight == "undefined") {//默认底部分页64 + 边距10extraHe...
拿到表格外层元素的高度,再减去跟表格同层元素所占高度,把这个值赋值给scroll 关键实现代码 <template><divref="palnlist"><h1>预案列表</h1><a-table:scroll="{ y:tableHeight }"></table></div></template><script>export default { data() { tableHeight: 0 }, methods:{ mounted() { this.getTabl...
.el-table__header-wrapper{ position: sticky; top:0; z-index:1; } 这里大家可能就能看出,我使用的思路是限制 table 的高度,对 table header 的 position 属性设置为 sticky。因为 table 直接和父组件有接触,所以设置后方便对 table 高度进行自动限制。使用 sticky 属性,是有兼容性问题的,比较老旧的浏览器不...
由于直接去控制antd table的头部置顶会导致头部样式丢失,每列去获取宽度设置感觉太麻烦,最后决定使用两个table,一个只做表头固定使用,不赋予数据。 具体做法时,将传入的属于都付给两个table,隐藏表头table的内容部分,当滚动页面超过内容table时,显示表头table。
:body-style="{ paddingBottom: '80px' }" @close="visible = false" :maskClosable="false" :keyboard="false" > <a-input v-model.lazy="searchGoodName" placeholder="搜索产品" allowClear> <a-icon slot="prefix" type="search" /> </a-input> ...
vue3 antd项目实战——table表格(一文带你快速实现后台管理系统最常用的table表格)🔥🔥 场景复现 上期文章我们介绍了如何修改ant design vue表格的默认样式,并以修改table表格的padding(调整表格行row的高度)为例,以vue组件的css样式穿透为方法,详细介绍了解决方案。
<a-tableref="table"size="small"rowKey="id"bordered :columns="physicalSurveyColumns":data-source="physicalSurveyData":pagination="pagination":customRow="customRow"></a-table> JS -> methods: //自定义行customRow(record, index) {return{//自定义属性,也就是官方文档中的props,可通过条件来控制样式st...
太长了,我要固定下table 高度,想想用css 样式设置下height 和滚动不就行了。 wtf ,看来想简单了,于是乎就百度了下。多半是强行重写ant 的table 样式。官方不推荐,我一般不这么用。于是乎想想其他办法。 解决方案 官网api 有这么一个属性,设置下即可计算滚动区域。