我想用elementUI的多选框组件展示信息，有一个货架信息的下拉菜单，当选中后会吧所有的货架信息以单选框的形式一列一列展示出来，下拉菜单选中的信息单选框上打勾 教我怎么写

好的，你可以按照以下步骤来实现：

1. 在页面中引入 elementUI 的多选框和下拉菜单组件。

2. 定义一个数组 `shelfList` 来存储货架信息的数据，例如：

shelfList: [
  { id: 1, name: '货架1' },
  { id: 2, name: '货架2' },
  { id: 3, name: '货架3' },
  // ...
]

3. 在下拉菜单组件中绑定 `shelfId` 属性来记录当前选中的货架信息的 id 值。

<el-select v-model="shelfId" placeholder="请选择货架信息">
  <el-option v-for="item in shelfList" :key="item.id" :value="item.id">{{ item.name }}</el-option>
</el-select>

4. 根据选中的货架信息来动态生成单选框组件。

<el-checkbox v-model="checkedShelfIds" :label="item.id" v-for="item in currentShelfList" :key="item.id">{{ item.name }}</el-checkbox>

其中，`currentShelfList` 是一个计算属性，用来获取当前选中的货架信息对应的单选框数据，例如：

computed: {
  currentShelfList() {
    const shelf = this.shelfList.find(item => item.id === this.shelfId);
    return shelf ? shelf.shelfItems : [];
  }
}

5. 在 `data` 中定义一个数组 `checkedShelfIds` 来记录当前选中的货架信息的 id 值。

data() {
  return {
    shelfList: [...],
    shelfId: null,
    checkedShelfIds: []
  }
}

6. 在单选框组件中绑定 `checkedShelfIds` 数组，用来记录选中的货架信息。

<el-checkbox v-model="checkedShelfIds" :label="item.id" v-for="item in currentShelfList" :key="item.id">{{ item.name }}</el-checkbox>

7. 在下拉菜单组件的 `change` 事件中重新计算当前选中的货架信息，并清空选中的单选框信息。

methods: {
  handleShelfChange() {
    this.checkedShelfIds = [];
  }
}

最终的代码实现大致如下：

<template>
  <div>
    <el-select v-model="shelfId" placeholder="请选择货架信息" @change="handleShelfChange">
      <el-option v-for="item in shelfList" :key="item.id" :value="item.id">{{ item.name }}</el-option>
    </el-select>
    <div v-if="currentShelfList.length">
      <el-checkbox v-model="checkedShelfIds" :label="item.id" v-for="item in currentShelfList" :key="item.id">{{ item.name }}</el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shelfList: [
        { id: 1, name: '货架1', shelfItems: [{ id: 1, name: '货架1-1' }, { id: 2, name: '货架1-2' }, { id: 3, name: '货架1-3' }] },
        { id: 2, name: '货架2', shelfItems: [{ id: 4, name: '货架2-1' }, { id: 5, name: '货架2-2' }, { id: 6, name: '货架2-3' }] },
        { id: 3, name: '货架3', shelfItems: [{ id: 7, name: '货架3-1' }, { id: 8, name: '货架3-2' }, { id: 9, name: '货架3-3' }] },
      ],
      shelfId: null,
      checkedShelfIds: []
    }
  },
  computed: {
    currentShelfList() {
      const shelf = this.shelfList.find(item => item.id === this.shelfId);
      return shelf ? shelf.shelfItems : [];
    }
  },
  methods: {
    handleShelfChange() {
      this.checkedShelfIds = [];
    }
  }
}
</script>