vxe-table组件的一些问题记录

vxe-able是前端开发中接触比较频繁的组件，下面记录下我在用这个组件开发需求过程中遇到的问题和解决方案

1. vxe-table组件展开列表第一列和最后一列显示错乱问题，说明：无论有无设置左右固定都会出现错乱问题

1-1：展现样式

1-2：解决方案：在css样式中加入以下代码

/deep/ .vxe-body--expanded-row {   // 针对没有设置左右固定的列
  background-color: #fffceb;
  .vxe-body--expanded-cell {
    padding: 5px 5px 5px 5px !important;
    .vxe-table--body-wrapper {
      overflow-x: scroll;
    }
  }
}
/deep/ .vxe-body--expanded-row .vxe-body--column.row-red {
  color: red;
}
/deep/ .vxe-table--body-wrapper.fixed-right--wrapper,
/deep/ .vxe-table--body-wrapper.fixed-left--wrapper {  // 针对设置了左右固定的列
  .vxe-body--expanded-row {
    .vxe-body--expanded-cell {
      visibility: hidden;
      padding: 5px 0 5px 0 !important;
    }
  }
}

2. vxe-table实现复选框单选

**说明：高版本的已经支持通过配置radio-config实现单选功能了，具体可参考vxe-tablle官方文档 **[vxetable.cn/v4/#/table/…]

1-1：需要先配置checkbox-config属性

    <vxe-table
      class="margin-top-10"
      border
      resizable
      auto-resize
      show-overflow
      column-key
      ref="psChangeTable"
      row-id="id"
      :max-height="`${tableMaxHeight}px`"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showIcon: true
      }"
      :checkbox-config="{ checkField: 'checked', trigger: 'cell' }"
      :edit-rules="validRules"
      :data="tableData"
      @checkbox-change="selectEvent"
      :show-footer="!!tableData.length"
      show-footer-overflow
      :footer-method="footerMethod"
      v-loading="loading"

    >

1-2：获取单选选中的数据和设置单选选中的状态

 selectEvent(data) {
      let row = data.row
      this.selectedData = data.row
      let isSelect = this.$refs.psChangeTable.isCheckedByCheckboxRow(row)
      this.$refs.psChangeTable.setAllCheckboxRow(false)
      this.$refs.psChangeTable.setCheckboxRow(row, isSelect)
    },

1-3：通过css样式隐藏表头的复选框

/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--unchecked-icon {
  display: none !important;
}
/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--indeterminate-icon {
  display: none !important;
}