多電機顯示并排序

要實現根據后端傳遞過來的驅動電機數據的數量來顯示不同數量的數據列表，我們可以使用 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