【前端零散知识点总结】

前端零散知识点总结

不定期添加整理

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 系列文章目录
• 前言

• 一、vue父子组件在不同情况下生命周期的执行顺序？

  • 1.并列结构组件​

  •  2.嵌套结构组

• 二、element-UI表格中多选框回显默认选中

  • 1.在element中的多选框介绍

  • 2.多选框数据的选择回显

---

前言

vue框架

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue父子组件在不同情况下生命周期的执行顺序？

     1.并列结构组件

           1.并列结构组件页面开启缓存时的生命周期（缓存只有在引用时，在<keep-alive></keep-alive>中才会开启缓存的生命周期）

        a. activated：activated 【缓存】激活使用

        b. deactivated：deactivated 【缓存】失活使用

<template>

  <div id="app">

    <ApeNav></ApeNav>    

       <!-- 使用了<keep-alive>开启缓存 -->

        <!-- include （组件名） 被缓存        exclude （组件名） 不被缓存 -->

        <keep-alive>

                <router-view v-if="$route.meta.keepAlive" />

        </keep-alive>

      <router-view v-if="!$route.meta.keepAlive"/>

  </div>

</template>

       

上中下结构组件的运行顺序为

    第一次进去上中下结构组件页面：

 当上中下结构组件页面跳转到另一单组件页面时：

 一单组件页面跳转回当上中下结构组件页面：

 2.并列结构组件页面没有激活缓存时的生命周期

<template>

  <div id="app">

        <!-- 没有使用<keep-alive>开启缓存 -->

    <ApeNav></ApeNav>

      <router-view></router-view>

  </div>

</template>

   第一次进去上中下结构组件页面：

 当上中下结构组件页面跳转到另一单组件页面时：

 一单组件页面跳转回当上中下结构组件页面：

 2.嵌套结构组件

<template>

  <div id="app">

    <ApeNav></ApeNav>    

       <!-- 使用了<keep-alive>开启缓存 -->

        <!-- include （组件名） 被缓存        exclude （组件名） 不被缓存 -->

        <keep-alive>

                <router-view v-if="$route.meta.keepAlive" />

        </keep-alive>

      <router-view v-if="!$route.meta.keepAlive"/>

  </div>

</template>

<!-- 这是父组件 -->

<template>

    <div class="parentview">      

        <one-son ref="one">{{str}}</one-son>

        <two-son ref="two">{{str}}</two-son>

    </div>

</template>

<!-- 这是two组件 -->

<template>

    <div class="twoson">

        <grand-son ref="son"></grand-son>

    </div>

</template>

1.嵌套结构组件页面开启缓存时的生命周期（缓存只有在引用时，在<keep-alive></keep-alive>中才会开启缓存的生命周期）

第一次进去嵌套结构组件页面：

当嵌套结构组件页面跳转到另一单组件页面时：

一单组件页面跳转回当嵌套结构组件页面：

2.嵌套结构组件页面没有激活缓存时的生命周期

第一次进去嵌套结构组件页面：

当嵌套结构组件页面跳转到另一单组件页面时：

一单组件页面跳转回当嵌套结构组件页面：

---

二、element-UI表格中多选框回显默认选中

1.在element中的多选框介绍

（1）界面

（2）button按钮及方法

 2.多选框数据的选择回显

（1）此案例通过点击事件完成，某一组包含多个项目的关系，即编辑某一组即编辑选中多个项目。

（2）点击编辑后显示多选框。

        <2.1>将多选框的全部选项展示出来；

        <2.2>显示编辑对象的存在的选项；

handleEdit(index,row){     //点击事件传入相应的组对象

   //查询所有项目，即查询table表中所有选项的数据

   this.$axios.get("http://localhost:8888/api/checkitem/findAll").then(

      (res)=>{

         this.checkItem = res.data.data; //1.将this.checkItem的数据展示出来，完成全部选项的展示

   //根据该组对象的id查找其包含项目的id数组

 this.$axios.get("http://localhost:8888/api/checkgroup/findCheckItemIdsByCheckGroupId",  {params:{id:row.id}}).then(

              (res)=>{

                 this.selectCheckitems= res.data.data; //2.获取项目的id数组。

                    //将全部选项与改组包含的项目id做比较

                    this.checkItem.forEach(row => {

                      this.selectCheckitems.forEach(id => {

                        console.log("id",id);

                        if(row.id === id){    //3.如果选项中的项目被组包含，就开启多选框的按钮

                            this.$refs.multipleTable1.toggleRowSelection(row,true);

                        }

                      })

                    })

              }

            ).catch(

              (err)=>{

                console.log(err)

              }

            );

          }

        ).catch(

          (err)=>{

            console.log(err);

          }

        );

}