vxe-table或vxe-grid列宽设置和表格修改顺序，左右固定等存库

<template>
  <div class="app-container report-table" style="padding-top: 0;">
    <el-row ref="tableList">
      <vxe-grid border stripe resizable keep-source ref="xGrid" id="reportHoursId" align="center" :print-config="{}" :import-config="{}" :export-config="{}" :columns="tableColumn"
        :toolbar-config="tableToolbar" :custom-config="customConfig" :resizable-config="{'minWidth':'100'}" :data="reportHoursList" show-overflow
        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" size="mini" :valid-config="{ autoPos: true, showMessage: true }" :height="tableHeight" :loading="loading"
        :row-config="{ isHover: true }" @checkbox-all="handleCheckboxAll" @resizable-change="resizableChangeEvent($refs.xGrid)">
        <template #default_productImage="{ row }"><el-image v-if="praseStrEmpty(row.baseProduct.thumbnailPath)!=''" title="查看大图" :src="prvImageUrl + row.baseProduct.thumbnailPath"
            :preview-src-list="pic" @click="picListOpen(row)">
          </el-image>
          <el-image v-else>
            <div slot="error" class="image-slot">
              <span>无商品图</span>
            </div>
          </el-image>
        </template>
        <template #default_mesOrderCode="{ row }">
          <div class="copy-flex">
            <span @click="handleUpdate(row,'1')" class="cope-svg" style="opacity: 1;">
              {{row.mesOrderCode}}
            </span>
            <svg-icon icon-class="copy-solid" @click="doCopy(row.mesOrderCode,'工序编号')" class="cope-svg" />
          </div>
        </template>
        <template #default_shipment="{ row }">
          <span>{{ parseTime(row.shipment, 'YYYY-MM-DD') }}</span>
        </template>
        <template #operation="{ row }">
          <div v-for="(item,index) in row.completeProcessesDtlList" :key="index">
            <el-progress type="circle" :percentage="Number((item.qty||0)/item.mesOrderDtlQty*100)" style="margin: 0 10px;"></el-progress>
            <div>{{ item.processesName }}</div>
          </div>
        </template>
      </vxe-grid>

    </el-row>

    <pagination v-show=" total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
export default {
  name: 'ReportHours',
  data() {
    return {
      // 子表
      //表格高度
      tableHeight: 350,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //左侧按钮组参数
      leftToolBar: {
        //权限字符串
        per: 'mes:mesOutOrderSales:',
        // 非多个禁用
        multiple: true,
        // 非单个禁用
        single: true,
        //是否是查看详情按钮
        isView: false,
        //是否是添加或修改弹出框
        addOrUpdate: false,
      },
      // 表单参数
      form: {},
      ctList: [],
      loadCt: false,
      wmsWarehouseList: [],
      // 加载显隐
      isSubmitLoading: false,
      // ----------------------
      prvImageUrl: this.$global.imgUrl,
      //图片主图
      pic: [],
      //新框架
      customConfig: {
        storage: true,
        // checkMethod: this.checkColumnMethod,
        updateStore: this.updateColumnStore,
        restoreStore: this.restoreColumnStore,
      },
      tableCustomConfig: {
        storage: true,
      },
      reportHoursList: [],
      tableToolbar: {
        // buttons: [
        //   {
        //     code: 'myInsert',
        //     name: '新增',
        //     icon: 'fa fa-floppy-o',
        //   },
        //   {
        //     code: 'mySave',
        //     name: '保存',
        //     // status: "success"
        //     icon: 'fa fa-floppy-o',
        //   },
        // ],
        // tools: [{ code: 'myPrint', name: '自定义打印' }],
        // refresh: true,
        // import: true,
        export: true,
        // print: true,
        zoom: true,
        custom: true,
      },
      tableColumn: [
        {
          type: 'checkbox',
          width: 40,
          align: 'center',
          sortable: true,
        },
        {
          type: 'seq',
          title: '序号',
          width: 45,
        },
        {
          field: 'productImage',
          title: '产品图',
          showOverflow: true,
          width: 190,
          slots: { default: 'default_productImage' },
        },
        {
          field: 'mesOrderCode',
          title: '工序单号',
          showOverflow: true,
          width: 190,
          slots: { default: 'default_mesOrderCode' },
        },
        {
          field: 'shipment',
          title: '计划结束时间',
          showOverflow: true,
          width: 100,
          slots: { default: 'default_shipment' },
        },
        {
          field: 'productCode',
          title: '产品编码',
          showOverflow: true,
          width: 140,
        },
        {
          field: 'productCode_dictText',
          title: '产品名称',
          showOverflow: true,
          width: 140,
        },
        {
          title: '工单进度',
          showOverflow: true,
          width: 300,
          slots: { default: 'operation' },
        },
      ],
    }
  },
  created() {
    this.getList()

    this.tableHeight = this.changeHeight() - 50
  },
  activated() {},
  mounted() {},
  methods: {

    // 列设置回显
    restoreColumnStore({ id }) {
      // 从服务端调用接口获取当前用户表格自定义列数据，支持异步，返回 Promise
      return this.findCustomSetting(id)
    },
    findCustomSetting(id) {
      return new Promise((resolve) => {
        columnConfigInfo(id).then((res) => {
          if (res.data) {
            resolve(JSON.parse(res.data.configJsonStr))
          } else {
            resolve({})
          }
        })
      })
    },
    // 列设置保存到数据库
    updateColumnStore({ id, type, storeData }) {
      // console.log('storeData', storeData)
      if (this.checkRole(['admin', 'column_config'])) {
        let query = {
          tableId: id,
          configJsonStr: JSON.stringify(storeData),
        }
        editColumnConfig(query).then((res) => {
          this.$message.success('列设置成功')
        })
      }
    },
    // 拖动列宽（可保存数据库）
    resizableChangeEvent() {
      const columns = this.$refs.xGrid.getColumns() // 注意：xTable或xGrid
      const customData = columns.map((column) => {
        return {
          width: column.renderWidth,
        }
      })
      console.log(customData)
    },
// ----------------------------------------------

    // 全选
    handleCheckboxAll() {
      // this.$refs.xTable.getCheckboxRecords():用于获取当前被勾选的行的记录
      this.ids = this.$refs.xGrid.getCheckboxRecords()
      this.leftToolBar.single = this.ids.length !== 1
      this.leftToolBar.multiple = !this.ids.length
    },
    handleCheckboxChange({ records }) {
      // console.log('复选框被点击，选中的数据：', records)
      this.ids = records.map((item) => item)
      this.leftToolBar.single = records.length !== 1
      this.leftToolBar.multiple = !records.length
    },

    resultMethods(row) {
      return (
        (row.utRateDen ?? '') +
        (row.stockUnitCode_dictText ?? '') +
        '=' +
        (row.utRateNum ?? '') +
        (row.soUnit_dictText ?? '')
      )
    },
    /** 查询销售出库列表 */
    getList() {
      this.loading = true
      this.getListNew('/mes/mesOrder/listWorkOrder', this.queryParams)
        .then((response) => {
          this.reportHoursList = response.rows
          this.total = response.total
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //图片列表
    picListOpen(row) {
      this.pic = [this.prvImageUrl + row.baseProduct.thumbnailPath]
    },
  },
}
</script>

<style scoped>
:deep(.vxe-tools > div) {
  margin-right: 10px;
}

:deep(.el-progress-circle) {
  width: 40px !important;
  height: 40px !important;
}
</style>

<style lang="scss">
.report-table {
  .vxe-table--render-default.size--mini .vxe-body--column.col--ellipsis {
    height: 80px !important;
  }
  .vxe-table--render-default
    .vxe-body--column.col--ellipsis:not(.col--active)
    > .vxe-cell {
    max-height: 80px !important;
    display: flex;
    align-items: center;
  }

  .el-image {
    height: 70px;
    width: auto;

    .el-image__inner {
    }
  }
}
</style>