<template>
  <div class="mt-10" v-for="item in deviceData">
    <span>{{item.name}}</span>
    <div id="flex-container" class="mt-4">
      <div class="flex-item">端口号：</div>
      <div class="flex-item">
        <el-input v-model="item.portNumber" ></el-input>
      </div>
      <div class="flex-item">开关：</div>
      <div class="flex-item">
        <el-switch v-model="item.switchValue"></el-switch>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const deviceData = ref([
  { name: '7M5ACU', portNumber: '1111', switchValue: true},
  { name: '变频器', portNumber: '0000', switchValue: false}
])
</script>

<style>
#flex-container {
  display: flex;
  align-items: center;
}

.flex-item {
  margin-right: 20px;
}
</style>
