html

<div v-for="(item,idx) in modal.data.catalog">
  <div>
     <CheckboxGroup v-model="modal.data.catalog" >
        <Checkbox :label="item.label">{{item.label}}</Checkbox>
     </CheckboxGroup>
  </div>
  <div>
      <CheckboxGroup v-model="modal.data.catalog" v-for="(item,idx) in item.children">
         <Checkbox :label="item.label">{{item.label}}</Checkbox>
      </CheckboxGroup>
  </div>            
 </div>

js
 catalog:[
                    {
                        label: "用户管理",
                        children: [
                            {
                                label: "医院1",
                            },
                            {
                                label: "医院2",
                            },
                            {
                                label: "医院3",
                            },
                            {
                                label: "医院4",
                            }
                        ]
                    },
                    {
                        label: "用户管理1",
                        children: [
                            {
                                label: "医院3",
                            },
                            {
                                label: "医院4",
                            },
                            {
                                label: "医院5",
                            },
                            {
                                label: "医院6",
                            }
                        ]
                    },
                ]

效果图

效果图展示

<el-timeline v-for="(item,index) in items" v-bind:key="index">
    <el-timeline-item :timestamp="(items[index].create_time)" placement="top">
      <el-card>
        <h4>{{items[index].title}}</h4>
        <p>{{items[index].remarks}}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  export default {
   data: () => ({
	items:[],
	})

数据存到items里面

 show(){
        axios
        .post(`${config.API_URL}/#`, {
        }).then((result) => {
           for (let i = 0; i < result.data.data.length; i++) {
             this.items[i] = result.data.data[i];
             console.log(result.data.data[i]);
           }
        })
        .catch((err) => {
          console.log("捕获异常", err);
        });
     }

Vue循环遍历

1.v-for介绍

2. v-for 遍历数组

<div id="app">
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
</div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
        names: ['张三', '李四']
      },
  });
</script>

使用过程中使用index

<div id="app">
  <ul>
    <li v-for="(name, index) in names">{{index + 1}} {{name}}</li>
  </ul>
</div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
        names: ['张三', '李四']
      },
  });
</script>

3.v-for遍历对象

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="attribute in person">{{attribute}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

value 、 key 都获取

<div id="app">
  <ul>
    <li v-for="(value, key) in person">{{key}}: {{value}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

value 、 key 和 index 都获取

<div id="app">
  <ul>
    <li v-for="(value, key, index) in person">{{index + 1}}{{key}}: {{value}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

4.v-for是使用key和不使用key的区别

官方推荐在使用v-for的时候，给对应的元素或组件添加上一个key属性
1.遍历时不使用key

1.遍历时使用key

注意：
1.所谓的位移其实是元素重新创建初始化，不用位移就是复用以前的元素。
2.如果要使用key的话，不要用index，要保证key与内容的唯一标识性，因为index是会更新的，如果新增或者修改，那么用key就没什么意思了。

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

5.可以响应式的方法

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="pushArray">push</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            pushArray() {
                this.names.push("aaa");
            }
        }
    });
</script>

5.1 注意直接修改数组元素时是不会响应式的

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="changed">changed</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            changed() {
                this.names[0] = 111;
            }
        }
    });
</script>

点击changed之后页面没有变化，可以数组元素已经变化了

5.2 以上问题的解决方案:

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="changed">changed</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            changed() {
              this.names.splice(0, 1, '111');
              // Vue 内部实现的方法
              Vue.set(this.names, 1, '222');
            }
        }
    });

</script>

点击changed后：

5.3 以下方法都是响应式的：