多电机显示并排序-优快云博客

多电机显示并排序

要实现根据后端传递过来的驱动电机数据的数量来显示不同数量的数据列表，我们可以使用 Vue 的 v-for 指令来遍历 driveMotorData 数组，并为每个驱动电机生成一个数据列表。这样，无论后端传来多少个驱动电机的数据，前端都能动态地展示出相应数量的列表。

在这段代码中，我使用了 v-for="motor in driveMotorData" 来遍历 driveMotorData 数组。每个 motor 对象都代表一个驱动电机的数据。这样，无论 driveMotorData 数组包含多少个对象，页面上都会为每个对象生成一个相应的数据展示列表。

motor.no作为驱动电机的序号。

相应的可充电储能装置电压以及可充电储能装置温度页面也是一样的操作步骤。

<TabPane label="驱动电机">
    <div v-for="motor in driveMotorData" :key="motor.id">
        <h3 style="font-weight: bolder;margin-left: 10px;font-size: 18px;">序号:
            <span style="font-weight: bolder;color: blue; margin-left: 10px;font-size: 18px;">{{ motor.no }}</span>
        </h3>
        <Row :gutter="20">
            <Col v-for="(label, key) in driveMotorlabel" :key="key" span="6">
                <div class="info-box">
                    <div class="info-box-icon bg-info">
                        <Icon type="md-mail" color="#fff"></Icon>
                    </div>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ label }}</span>
                        <span class="info-box-number">{{ motor[key] }}</span>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</TabPane>

**驱动电机排序：**使用 parseInt 函数将字符串转换为整数，并指定基数为 10（代表十进制），确保字符串正确地被解析为数字。然后，我们根据转换后的数字进行排序。

// 驱动电机
let driveMotorDataBack = response.data.data.data.driveMotorData
// 给驱动电机排序，从小到大按顺序显示
driveMotorDataBack.sort((a, b) => {
	return parseInt(a.no, 10) - parseInt(b.no, 10)
})
vm.driveMotorData = driveMotorDataBack