1. 新增默认加载时先判断各选项是否获取完成逻辑

riku

2025-02-21 c35074e0e33054bb6c5ada22f8104422ae953b17

 src/components/SliderBar.vue

@@ -1,6 +1,7 @@
<template>
  <el-row justify="center" align="middle" class="wrap">
    <el-form-item label="数据量">
    <!-- <el-col :span="6"> -->
    <el-form-item label="展示数据量">
      <el-select
        v-model="pageSize"
        @change="handleSizeChange"
@@ -12,18 +13,26 @@
        <el-option label="500" :value="500" />
      </el-select>
    </el-form-item>
    <!-- </el-col> -->
    <!-- <el-col :span="18"> -->
    <div class="slider-wrap m-l-16">
      <el-slider v-model="progress" :marks="marks" @input="handleInput" />
      <el-slider :model-value="progress" :marks="marks" @input="handleInput" />
    </div>
    <!-- </el-col> -->
  </el-row>
</template>
<script>
export default {
  emits: ['input', 'sizeChange'],
  props: {
    progress: {
      type: Number,
      default: 0
    }
  },
  emits: ['update:progress', 'sizeChange'],
  data() {
    return {
      pageSize: 200,
      progress: 0,
      marks: {
        0: {
          style: {
@@ -43,7 +52,7 @@
  methods: {
    handleInput(e) {
      // console.log(e);
      this.$emit('input', e);
      this.$emit('update:progress', e);
    },
    handleSizeChange(e) {
      this.$emit('sizeChange', e);
@@ -57,6 +66,10 @@
  height: 60px;
}
.slider-wrap {
  min-width: 400px;
  /* background-color: aliceblue; */
  min-width: 290px;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>