Vue使用Element的折叠面板Collapse设置默认全部展开

这个适用于需要for循环<el-collapse-item>负责展开的属性是value<el-collapse :value="opened"><el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa"><div>XXXXXXXXXXXXXXXXXXXXXXXX</div>&

suzhiwei_boke

6740人浏览 · 2022-05-08 22:02:06

suzhiwei_boke · 2022-05-08 22:02:06 发布

这个适用于需要for循环 <el-collapse-item>
负责展开的属性是value

<el-collapse :value="opened">
  <el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa">
    <div>XXXXXXXXXXXXXXXXXXXXXXXX</div>
  </el-collapse-item>
</el-collapse>

<script>
  export default {
    data() {
      return {
       	List:[
       		{ 
       			aaa:"123"
       		},
       		{
       			aaa:"354"
       		},
       		{
       			aaa:"asfdvg"
       		}
       	]
      };
    },
      computed: {
            opened() {
                return this.List.map((i) => {
                    return i.aaa;
                });
            }
        },
  }
</script>

:name 只要是子元素的唯一属性即可

这时会有一个bug，当页面有数据发生变动时，这个折叠就会重新刷新，造成体验感变差的现象