前端实用小妙招

最新推荐文章于 2024-06-03 09:20:03 发布

鲸鱼前端大师

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量348

点赞数 2

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/weixin_54351962/article/details/117323894

版权

一. 知识点

1.去掉弹窗遮罩层：在 el-dialog 标签上写 : modal= ’ false ’

2.el-select选择器下拉框中el-option选择项标签上，即要绑定的循环a数组进行的数据处理

let yf=res.data.data.filter(item =>item.type==2)
let a=yf.map(item =>{return { value: `${item.id}`, label: `${item.name}` }} )

3.form表单中el-cascader级联选择器校验，需要注意：①验证规则对象的 type 属性是否是 ‘array’ (不可大写)；②el-form标签中的 :model=“form” 是否是 el-cascader 组件 v-model 绑定的对象相同；③el-form-item标签 prop 属性绑定的值checkList 是否是 el-cascader 组件 v-model 绑定的key相同（相同即v-model=“form.checkList”）

4.输入框里输入的变为密文*** ：即在el-input标签上写 type=“password”

5.若想让一个div中内容多了，自动撑出滚动条，则需要给这个div先加个类名，例如class=“zll”, 然后在样式里写

.zll {
        height: calc(100vh - 62px);
		width:  calc(100vw - 38vw - 12px);
		overflow-y: scroll;
}

或者

<div style="flex: auto;height: calc(100vh - 62px);overflow:auto">

6.数据处理（获取数组中被选中项的id组成的新数组）

this.apiReturnAarr =  res.data.data.list.filter((item) => {
                return item.isChecked === true;
              }).map(i=>i.id)

7.两个数组的减法
(即在a数组中筛选出，在b数组中没有出现a数组成员项的那些成员项组成的新数组再赋值给a数组)
indexOf 等于 -1即没有找到

this.a=this.a.filter(itemA=>this.b.indexOf(itemA)==-1)

8.找到两个数组指定的不同属性对应的属性值相同的成员项组成的新数组
（即b数组中的systemId等于a数组中的id的那些成员项组成的新数组c）
findIndex不等于-1 即是找到了，有

this.c=this.b.filter(itemB=>{
                            return this.a.findIndex(itemA=>itemA.id==itemB.systemId) != -1
                        })

9.再次打开弹窗，已选中的多选框回显无效
toggleRowSelection(row, selected)方法接受两个参数，row传递被勾选行的数据，selected设置是否选中

this.$nextTick(() => {
                 if(checkedData.length > 0){
                   checkedData.forEach((item) => {
                     $this.$refs.multipleTable.toggleRowSelection(item,true);
                   });
                 }
               });

10.打开新窗口跳转，地址栏携带token ( 地址栏拼接token用？衔接）

let a=sessionStorage.getItem("userToken")
var tempwindow=window.open('_blank')
tempwindow.location=`${row.url}?${a}`

11.下拉框选择值的去除功能禁用，即在el-select标签上去掉clearable即可

12.跳转到其他组件，例如： this.$router.push({ path: ‘/app/common-roleMgmt/detail/add’ })

13.获取地址栏最后一个字段

let str = window.location.href.split('/')[6]
if (str) str = str.split('?')[0]

14.打开新窗口，跳转到当前ip地址的对应组件上

var tempwindow=window.open('_blank')
tempwindow.location=`http://${window.location.host}/authority/#/app/common-single`

15.鼠标经过，变小手，在样式上直接加 cursor: pointer
16.清空sessionStorage，即sessionStorage.clear()
17.跳转，即window.location.href = ’ / ’
18.修改窗口名称：

 <body>
  <script type="text/javascript" charset="UTF-8">
      window.onload = function(){
                     document.title = 'PAAS';
      }
 </script>
  </body>

鲸鱼前端大师

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端实用小妙招

一.知识点1.去掉弹窗遮罩层：在 el-dialog 标签上写 : modal= ’ false ’2.el-select选择器下拉框中el-option选择项标签上，即要绑定的循环a数组进行的数据处理let yf=res.data.data.filter(item =>item.type==2)let a=yf.map(item =>{return { value: ${item.id}, label: ${item.name} }} )3.form表单中el-cascader级联
复制链接

扫一扫