【bug】【vxe-table】设置固定列，表头后端返，样式错乱已解决

news2025/1/21 0:48:33

bug产生的原因以及解决的方法都很简单
但是要复现bug，就得把前因都铺垫清楚才行

一、前因
项目用的是vxe-table，并且封装成了组件，方便大量调用
并且column是后端动态返的，只需要绑定指定id给后端就行，大概就是这样，
在这里插入图片描述
在父组件直接定义tableId就行

表头返了之后，组件内部其实就是循环column，代码不全，仅展示相关的一些代码

    <vxe-table
      :id="vxeTableId"  
      ref="vxeTable"
    >
      <vxe-column
        v-for="config in newColumns"
        :key="config.key"
        :width="config.width"  
        :field="config.field"
        :visible="config.visible"
        :header-align="config.field | rightHeader"
        :filters="config.filters"
        :title=" config.title"
        :align="config.align || 'center'"
        :fixed="config.freeze | changeStr"
        :min-width="config.field | specifiedWidth(config)"
        :resizable="true"
      >
          </vxe-column>
    </vxe-table>

刚刚说了表头是后端返的，直接在父组件赋值就行
在这里插入图片描述
子组件watch监听中赋值，这里说个点，父组件传进来的值通过watch可以实时动态改变，不然只能在created函数中赋值，只有第一次进或刷新才会更新值，或者在父组件通过子组件的refs，直接触发子组件定义的方法，在方法里赋值。
在这里插入图片描述
表头有了，接下来就是表格数据，这个没什么说的，就是正常调接口拿值就行，这里就不贴代码了

产生这个bug是当我正常引用组件，，刚渲染样式就错位了，经过排查发现，表格需要固定左侧第一列，所以有个fixed属性，vxe-table上关于这个属性，在左侧API的vxe-column里
在这里插入图片描述
它的值是字符串，而后端时间久了也忘记了，他第一条返的是true，其他所有都是false

在子组件中关于fixed属性，进行了过滤

在这里插入图片描述
false是固定到右侧，后端都返false肯定会引起样式错乱，改成空字符串样式就正常了

filter:{    
    changeStr(v) {
      let str = ''
      if (v === true) {
        str = 'left'
      } else if (v === false) {
        str = 'right'
      } else {
        str = ''
      }
      return str
    },}