我有一个货架的下拉菜单，数据源是后端传过来的数组，当下拉菜单选中一个货架时，在下方循环出一行一行的可选中的货架信息，只能选中一个，选中的货架信息会在右侧循环出货架的节数信息，用elementUI或vue实现

好的，基本思路是先通过elementUI的Select组件实现货架的下拉选择，然后在下方用elementUI的Table组件展示可选中的货架信息。接着，在右侧使用elementUI的Table组件展示货架的节数信息。具体实现如下：

1.在Vue组件中定义一个数组来存储后端传过来的货架数据，假设数组名为`shelfList`，数据格式如下：

[
  { id: 1, name: '货架1', desc: '货架1的描述信息', sections: 3 },
  { id: 2, name: '货架2', desc: '货架2的描述信息', sections: 4 },
  { id: 3, name: '货架3', desc: '货架3的描述信息', sections: 5 },
  // ...
]

其中，`sections`表示货架的节数。

2.使用elementUI的Select组件来实现货架的下拉选择，代码如下：

<el-select v-model="selectedShelf" placeholder="请选择货架">
  <el-option
    v-for="shelf in shelfList"
    :key="shelf.id"
    :label="shelf.name"
    :value="shelf.id">
  </el-option>
</el-select>

其中，`v-model`绑定了一个名为`selectedShelf`的变量，用来存储用户选择的货架的ID。`:key`绑定了货架的ID，`:label`绑定了货架的名称，`:value`绑定了货架的ID。

3.使用elementUI的Table组件来展示可选中的货架信息，代码如下：

<el-table :data="shelfList" v-if="selectedShelf">
  <el-table-column prop="name" label="货架名称"></el-table-column>
  <el-table-column prop="desc" label="货架描述"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-radio
        v-model="selectedShelfItem"
        :label="scope.row"
        :disabled="selectedShelfItem && selectedShelfItem.id !== scope.row.id">
      </el-radio>
    </template>
  </el-table-column>
</el-table>

其中，`:data`绑定了`shelfList`数组，`:if`判断用户是否选择了货架，如果没有选择则不显示Table组件。`<el-table-column>`用来定义表格的列，`prop`属性绑定了要展示的数据字段，`label`属性绑定了列的标题。

在操作列中，我们用了一个`<el-radio>`组件来实现单选功能。`v-model`绑定了一个名为`selectedShelfItem`的变量，用来存储用户选择的货架信息。`:label`绑定了当前行的数据对象`scope.row`，`:disabled`属性用来判断当前行是否可以选中，如果当前已经有选中的货架信息，且当前行的ID不等于已选中的货架ID，则禁用该行的选择。

4.在右侧使用elementUI的Table组件展示货架的节数信息，代码如下：

<el-table :data="sectionsList" v-if="selectedShelf">
  <el-table-column prop="section" label="货架节数"></el-table-column>
</el-table>

其中，`:data`绑定了`sectionsList`数组，`:if`判断用户是否选择了货架，如果没有选择则不显示Table组件。`<el-table-column>`用来定义表格的列，`prop`属性绑定了要展示的数据字段，`label`属性绑定了列的标题。

5.在Vue组件中定义`selectedShelf`和`selectedShelfItem`两个变量，用来存储用户选择的货架ID和货架信息。同时，定义一个计算属性`sectionsList`，根据用户选择的货架信息来生成展示的节数数据。代码如下：

<template>
  <div>
    <el-select v-model="selectedShelf" placeholder="请选择货架">
      <el-option
        v-for="shelf in shelfList"
        :key="shelf.id"
        :label="shelf.name"
        :value="shelf.id">
      </el-option>
    </el-select>

    <el-table :data="shelfList" v-if="selectedShelf">
      <el-table-column prop="name" label="货架名称"></el-table-column>
      <el-table-column prop="desc" label="货架描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-radio
            v-model="selectedShelfItem"
            :label="scope.row"
            :disabled="selectedShelfItem && selectedShelfItem.id !== scope.row.id">
          </el-radio>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="sectionsList" v-if="selectedShelf">
      <el-table-column prop="section" label="货架节数"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shelfList: [
        { id: 1, name: '货架1', desc: '货架1的描述信息', sections: 3 },
        { id: 2, name: '货架2', desc: '货架2的描述信息', sections: 4 },
        { id: 3, name: '货架3', desc: '货架3的描述信息', sections: 5 },
        // ...
      ],
      selectedShelf: '',
      selectedShelfItem: null
    }
  },
  computed: {
    sectionsList() {
      if (!this.selectedShelfItem) {
        return []
      }
      return Array.from({ length: this.selectedShelfItem.sections }, (_, i) => ({ section: `第${i+1}节` }))
    }
  }
}
</script>

完整代码如上所示。