提交工艺路线的表格触底加载

CD配唱片

2025-04-24 b0e84af3dafe8984b69858c4420b5611c9b58f30

 src/components/HxlhTable/index.vue

@@ -31,18 +31,19 @@
            :expand-config="expandConfig"
            :tree-config="treeConfig"
            :row-style="rowStyle"
      :virtualYConfig="virtualYConfig"
            @sort-change="sortChange"
            @page-change="pagerChange"
            @form-submit="findList"
            @checkbox-change="checkChange"
            @checkbox-all="checkChangeall"
      @scroll-boundary="scrollBoundaryEvent"
            >
            <template v-slot:buttons="row">
                <slot name="buttons" v-bind="row"/>
            </template>
            <template #expandContent="{ row }">
              <vxe-grid v-bind="subGridOptions" :data="row.subList">
              </vxe-grid>
        <vxe-grid v-bind="subGridOptions" :data="row.subList"> </vxe-grid>
            </template>
            <template v-slot:status="row" >
              <slot name="status" v-bind="row"/>
@@ -63,118 +64,122 @@
showOverflow: {
    type: Boolean,
    default: () => {
    return true
    }
      return true;
    },
},
columns: {
    type: Array,
    default: () => {
    return []
    }
      return [];
    },
},
showfooter: {
    type: Boolean,
    default: () => {
    return false
    }
      return false;
    },
},
toolbar: {
    type: Object,
    default: () => {
        return {
            id: 'khjgz',
        id: "khjgz",
            zoom: true,
            resizable: {
            storage: true
          storage: true,
            },
            custom: {
            storage: true
          storage: true,
            },
            slots: {
            buttons: 'buttons'
            }
        }
    }
          buttons: "buttons",
        },
      };
    },
},
data: {
    type: Array,
    default: () => {
    return []
    }
      return [];
    },
},
loading: {
    type: Boolean,
    default: false
    default: false,
},
page: {
    type: Object,
    default: function() {
        return null
    }
      return null;
    },
},
checkboxConfig: {
    type: Object,
    default: () => {
    return {}
    }
      return {};
    },
},
maxHeight: {
    type: String,
    default: () => {
    return ''
    }
      return "";
    },
},
height: {
    type: String,
    default: () => {
    return ''
    }
      return "";
    },
},
reloadData: {
    type: Function,
    default: () => {
    return {}
    }
      return {};
    },
},
footerCellClassName: {
    type: Function,
    default: () => {
    return {}
    }
      return {};
    },
},
mxTableFootData: {
    type: Array,
    default: () => {
    return []
    }
      return [];
    },
},
expandConfig: {
    type: Object,
    default: () => {
      return {lazy: false}
    }
      return { lazy: false };
    },
},
subGridOptions: {
    type:Object,
    default :()=>{
      return {}
    }
      return {};
    },
},
treeConfig: {
    type: Object,
    default: () => {
    return {}
    }
      return {};
    },
},
rowStyle: {
    type: Function,
    default: () => {
    return {}
    }
      return {};
},

})

  },
  virtualYConfig:{
    type: Object,
    default: () => {
      return {};
    },
  }
});

const tableForm = ref([]);

@@ -182,55 +187,72 @@
const emit = defineEmits();

function pagerChange({ type, currentPage, pageSize }) {
    if (type == 'current') {
  if (type == "current") {
        emit("changePageNo", currentPage);
    } else if (type == 'size') {
        emit('changePageSize', pageSize)
  } else if (type == "size") {
    emit("changePageSize", pageSize);
    }
}
function findList() {}

function sortChange({ column, property, order }) {
    emit('sortTable', property, order)
  emit("sortTable", property, order);
}

function checkChange(info) {
    const { records, checked, row, rowIndex } = info
    emit('on-checkbox', { records, rowIndex, checked })
  const { records, checked, row, rowIndex } = info;
  emit("on-checkbox", { records, rowIndex, checked });
}

function checkChangeall(info) {
    const { records, checked, row } = info
    emit('on-checkbox', { records, rowIndex: null, checked })
  const { records, checked, row } = info;
  emit("on-checkbox", { records, rowIndex: null, checked });
}

// 定义 footerMethod 函数
function footerMethod({ columns, data }) {
  // 触发 footerMethod 事件
  emit('footerMethod', { columns, data });
  emit("footerMethod", { columns, data });
  // 返回 Vuex 中的 hxlhTableFootData 状态
//   return useStore.state.hxlhTableFootData;
};

function handleSum(list, field) {
    var total = 0
    for (var index = 0; index < list.length; index++) {
    total += Number(list[index][field] || 0)
    }
    return total
function scrollBoundaryEvent ({ direction }) {
  switch (direction) {
    case 'top':
      console.log('触发顶部阈值范围')
      break
    case 'bottom':
      console.log('触发底部阈值范围')
      // this.loadList(20)
      emit('bottomAutoLoadMore')
      break
    case 'left':
      console.log('触发左侧阈值范围')
      break
    case 'right':
      console.log('触发右侧阈值范围')
      break
  }
}
function handleSum(list, field) {
  var total = 0;
  for (var index = 0; index < list.length; index++) {
    total += Number(list[index][field] || 0);
  }
  return total;
}
const vxeTable = ref(null);

// 在值发生改变时更新表尾合计
function updateFooter(params) {
    const xTable = vxeTable.value
    xTable.updateFooter()
  const xTable = vxeTable.value;
  xTable.updateFooter();
}

// 取消复选框选择
function clearCheckboxRow() {
    const xTable = vxeTable.value
    xTable.clearCheckboxRow()
  const xTable = vxeTable.value;
  xTable.clearCheckboxRow();
}

// 定义 tablePage 计算属性
@@ -242,10 +264,19 @@
    total: props.page.total,
    currentPage: props.page.current,
    pageSize: props.page.size,
    align: 'left',
    align: "left",
    pageSizes: [10, 20, 50, 100, 500],
    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
    perfect: true
    layouts: [
      "PrevJump",
      "PrevPage",
      "Number",
      "NextPage",
      "NextJump",
      "Sizes",
      "FullJump",
      "Total",
    ],
    perfect: true,
  };
});

@@ -285,5 +316,4 @@
  .vxe-table .vxe-footer--column.col-red {
    color: red;
  }

</style>