使用vxe-table 3.x 可编辑表格莫名多出一列

最新推荐文章于 2024-08-22 14:38:56 发布

cnsummerLi

最新推荐文章于 2024-08-22 14:38:56 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_39689605/article/details/105552709

版权

效果展示：

以前代码：

  <vxe-table
                border
                show-overflow
                ref="xTableGrade"
                max-height="400"
                :data="tableDataEdit"
                :edit-config="{trigger: 'click', mode: 'cell'}">
                <vxe-table-column type="checkbox" width="10%"></vxe-table-column>
                <vxe-table-column type="seq" width="10%"></vxe-table-column>
                <vxe-table-column width="20%" field="fundcodeGrade" title="分级名称" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column width="20%" field="fundnameGrade" title="分级代码" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column width="20%" field="shareType" title="份额类型" :edit-render="{name: '$select', options: shareTypeArr, optionProps: {value: 'code', label: 'name'}}"></vxe-table-column>
                <vxe-table-column width="20%" field="leverageRatio" title="杠杆比例" :edit-render="{name: 'input'}"></vxe-table-column>
              </vxe-table>

1、解决办法，采用响应式宽度（width="auto"）和自适应（auto-resize），并给表格添加div限制

效果展示：

完整代码：

 <div >
               <vxe-table
                border
                show-overflow
                ref="xTableGrade"
                width="auto"
                max-height="400"
                :data="tableDataEdit"
                :edit-config="{trigger: 'click', mode: 'cell'}">
                <vxe-table-column type="checkbox" width="10%"></vxe-table-column>
                <vxe-table-column type="seq" width="10%"></vxe-table-column>
                <vxe-table-column width="20%" field="fundcodeGrade" title="分级名称" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column width="20%" field="fundnameGrade" title="分级代码" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column width="20%" field="shareType" title="份额类型" :edit-render="{name: '$select', options: shareTypeArr, optionProps: {value: 'code', label: 'name'}}"></vxe-table-column>
                <vxe-table-column width="20%" field="leverageRatio" title="杠杆比例" :edit-render="{name: 'input'}"></vxe-table-column>
              </vxe-table> 
            </div>

2.终极办法，是在不行给<div> 加一个v-if,用到可编辑表格的时候把v-if变为true,让页面重新渲染