当前位置: 首页 > Web前端 > HTML

解决antdv组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用

时间:2023-03-28 16:39:50 HTML

解决antdv组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用问题在开发项目中使用antdv时,发现table组件固定某列(fixed)和扩展某行(expandedRowRender)不能同时使用。风格不相容。在大神的指点下,找到了方法,记录在这里。遇到的问题如下:问题描述:点击左边的加号(+)展开一行时,固定在右边的操作栏的样式无法适应整个表格的高度。解决方法:展开行后,单独控制单个固定列的td的高度。正常效果如下:(重新定义红色区域的高度)直接添加代码:record.versionId"class="components-table-demo-nested":pagination="pagination":扩展行键。sync="expandedRowKeys":scroll="{x:true}"@change="handleTableChange"@expand="expandedOneRows">{{记录。updateDesc}}

onChange(checked,record,index)"/>
查看编辑删除
{{index+1}}
{{记录。文件名}}downloadhandleheightinexpandedOneRowsmethodexpandedOneRows(expanded,record){//控件只展开一行if(expanded){//展开前清除,并赋值,只展开一行this.expandedRowKeys=[]this.expandedRowKeys.push(record.versionId)}else{this.expandedRowKeys=[]}//解决AntDesignVue表格组件固定一列(fixed)和展开一行(expandedRowRender)不能使用this.$nextTick(()=>{setTimeout(()=>{constelement=document.querySelectorAll(`[data-row-key='${record.versionId}-extra-row']`)同时//计算需要展开的高度,使用appenddom元素展开高度,直接修改高度,//但当前行触发moursemove事件触发dom样式重置//33是td的padding值加上border值constheight=element[0].getBoundingClientRect().height-33element[1].childNodes[0].innerHTML=``},0)})},