Element-ui自定义组件：可折叠按钮列表

在Element UI中创建一个可折叠的按钮列表，你可以使用el-collapse和el-collapse-item组件。下面是一个简单的例子：

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item
      v-for="(item, index) in list"
      :key="index"
      :name="item.name"
      :title="item.title">
      <div>{{ item.content }}</div>
    </el-collapse-item>
  </el-collapse>
</template>
 
<script>
export default {
  data() {
    return {
      activeNames: ['1'], // 默认展开第一项
      list: [
        {
          name: '1',
          title: '按钮1',
          content: '这是按钮1的内容'
        },
        {
          name: '2',
          title: '按钮2',
          content: '这是按钮2的内容'
        },
        {
          name: '3',
          title: '按钮3',
          content: '这是按钮3的内容'
        }
      ]
    };
  },
  methods: {
    handleChange(activeNames) {
      console.log('当前展开的项：', activeNames);
    }
  }
};
</script>

在这个例子中，el-collapse组件用于创建折叠面板，el-collapse-item组件用于创建每个可折叠的项。v-for指令用于循环渲染列表中的每个项，并将每个项的name属性绑定到对应的item.name。activeNames数据属性用于控制展开的项，默认展开第一项。handleChange方法用于监听折叠项的变化。