ElementUI expand | scoped 实习两周总结

最新推荐文章于 2023-05-24 13:59:15 发布

dizzydwarf

最新推荐文章于 2023-05-24 13:59:15 发布

阅读量338

点赞数

文章标签： javascript css vue.js elementui

本文链接：https://blog.csdn.net/dizzydwarf/article/details/109584982

版权

ElmentUI expand | scoped 实习两周总结

scoped

1 可以scoped和正常的一块用（注意两个标签的顺序）
2 私有化模块，添加data-v-hash的属性
（对使用了scoped里class的部分，在在dom节点里添加data-v-hash的属性，同组件都会添加，但是没在scoped里的class在页面中的css后不会添加）
（将scoped里的.class改为.class[data-v-hash]来特定的选择该节点，来实现私有化，不会影响别的组件）
3 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
4 覆盖elementUI时，不加scoped（可见下面的父子实验，相当于父scoped，子无scoped）

父子实验：
1 父子都不加scoped，父随子改
2 父有scoped，子没有父为父，子为子子不会继承父scoped里式样
3 父有scoped，子有scoped 父为父，子为子
4 父无scoped，子有scoped 父为父，子为子父没有也不用子的
在这里插入图片描述

导航守卫 beforeEach

1 设置某些index不用判断是否登录，可用数组+indexof简化代码
2 导航守卫就是来判断是否登录的，(๑•̀ㅂ•́)و✧

session/local/cookie的区别

https://www.cnblogs.com/shj-com/p/11341586.html
写的很好

cookie很小，session/localstorage 5M
session 关闭窗口就没有 local会存在本地
localstorage一般来放token
具体用法建议百度，document.cookie…localstorage.setItem… balabala

https

（面试问了，当时就记得安全来着）

https://www.cnblogs.com/wqhwe/p/5407468.html
写的也很好

总结一下
加入ssl层
需要申请证书，简单来说就是要钱
生成成对的密匙，加密后传输，不再是明文
耗电（不太理解）

正则

留着下周看，感觉东西不少

slot

elementUI经常用到slot，slot-scope作用域插槽来获取数据，name=""判断插入到哪里
在这里插入图片描述

<div class="child4">
       <slot name="top" :data="item"></slot>
 </div>
<child4>
     <template #top="slotProps">
          <div>{{slotProps.data}}</div>
      </template>
</child4>

拦截器 git pull冲突留着下周呜呜呜

滚动条

在这里插入图片描述

一个小问题

在这里插入图片描述
直接写multiple-limit = 2 会报错

eslint 中v-for

要加:key = "item"避免报错，当然选别的也行

ElementUI expand

      <template slot-scope="props">
      //设置expand内部的内容
      </template>

@row-click="rowClick" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange" ref="tableList"

这个写在el-table里

    rowClick (row) {
      this.$refs.tableList.toggleRowExpansion(row)
    },
    expandChange (row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
    },
    getRowKeys (row) {
      return row.id
    }