1. 前端开发日记总结

1.axios模块注意事项

// 查询工号是否重复
export function getEmployeeCheckUserCode(data) {
  return request({
    url: 'employee-user/v1/emp-user/code',
    method: 'get',
    params: data
  })
}
getEmployeeCheckUserCode({ code: value, userId: this.userId }).then(res => {
          if (res.data.msg === '工号可用') {
            callback()
          } else {
            callback('工号已存在')
          }
        })

2.0 数组CRUD

1.业务场景删除指定内容,

    <el-tag
      v-for="(tag, index) in deptData"
      :key="index"
      closable
      @close="handleCloseDept(tag)">
      {{ tag.deptName }}
   </el-tag>    
// 删除部门tag
    handleCloseDept(tag) {
      // 通过key值的变动强制刷新组件
      this.deptData.splice(this.deptData.indexOf(tag), 1)
    },

2.0 el-tags和el-tree树形结构的综合运用情况

3 el-table设置表格高度自适应

<el-table ref="table" :data="tableData" :height="tableHeight"></el-table>

export default {
    data(){
        return {
            tableHeight: 50,
            tableData: []
        }
    },
    mounted:function(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
            }
        })
        //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
　　　　 //50表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
    }
}

4.vue路由跳转打开新一页

outsideLink () {
    let {href}= this.$router.resolve({
    path: "/newLinkPage",  
  });
  window.open(href, '_blank');
}

5.0 el-table全选和取消全选2种方式

5.1 自定义的表格模式

• 自定义封装列表的选项框勾选，使用自定义方式完成全选或者取消，选择个别状态为isIndeterminate 等待状态。

<el-table-column width="55">
 <template slot-scope="scope">
  <el-checkbox v-model="scope.row.isCheck" @change="handleCheck($event, scope.row)"/>
  </template>
</el-table-column>

1. table点击点击选择

   • 第一步先判断点击的数组和当前传进来的数据是否存在，存在返回下标没有则-1
   • 如果不存在空的则把选择的内容添加到中间数组 this.checkList 则表示当前是选择点击勾选状态
   • 存在数据并且返回当前数据下标则 haveAny !== -1进行下标的删除等于 取消勾选状态取消选择
   • this.isIndeterminate通过当前点击的长度和输入的中间数组长度判断若不相等则为等待状态表示false（indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果）
   • checkAll全部选择状态，table表格全部选择表示当前状态

    handleCheck(val, item) {
      const haveAny = this.checkList.findIndex((citem) => {
        return citem.orderId === item.orderId
      })
      if (val) {
        if (haveAny === -1) {
          this.checkList.push(item)
        }
      } else {
        if (haveAny !== -1) {
          this.checkList.splice(haveAny, 1)
        }
      }
      this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.tableData.length
      this.checkAll = this.checkList.length > 0 && this.checkList.length === this.tableData.length
      console.log(this.checkList)
    },

1. 自定义checkbox点击实现table自定义的 checkbox全部选择

• 先让 this.isIndeterminate状态隐藏
• 判断 this.tableData 内容使用 forEach遍历完成 开关状态
• 并且完成赋值修改最后的选择状态

    handleCheckAllChange(val) {
      this.isIndeterminate = false
      if (val) {
        this.tableData.forEach(item => {
          item.isCheck = true
        })
        this.checkList = JSON.parse(JSON.stringify(this.tableData))
      } else {
        this.tableData.forEach(item => {
          item.isCheck = false
        })
        this.checkList = []
      }
    },

5.2 自定义的表格模式

  <el-table   @selection-change="handleSelectionChange"  
          <el-table-column type="selection" width="55"/>
  <el-table/>

1. 自定义全选模式

   • 完成中间数组的赋值插入，根据插入的数据的长度和 this.tableData.length 判断实现对自定义checkbox的状态切换修改

    handleSelectionChange(val) {
      this.checkList = val
      this.checkList.length === this.tableData.length ? this.checkAll = true : this.checkAll = false
      console.log(this.checkList)
    },

1. 点击选项

• 第一步先判断点击的数组和当前传进来的数据是否存在，存在返回下标没有则-1
• 如果不存在空的则把选择的内容添加到中间数组 this.checkList 则表示当前是选择点击勾选状态
• 存在数据并且返回当前数据下标则 haveAny !== -1进行下标的删除等于 取消勾选状态取消选择
• this.isIndeterminate通过当前点击的长度和输入的中间数组长度判断若不相等则为等待状态表示false（indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果）
• checkAll全部选择状态，table表格全部选择表示当前状态

    // 点击选项
    handleCheck(val, item) {
      const haveAny = this.checkList.findIndex((citem) => {
        return citem.userId === item.userId
      })
      if (val) {
        if (haveAny === -1) {
          this.checkList.push(item)
        }
      } else {
        if (haveAny !== -1) {
          this.checkList.splice(haveAny, 1)
        }
      }
      this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.tableData.length
      this.checkAll = this.checkList.length > 0 && this.checkList.length === this.tableData.length
    },

1. 当页全选模式

    // 当页全选
    handleCheckAllChange(val) {
      console.log(val)
      this.isIndeterminate = false
      if (val) {
        this.tableData.forEach(item => {
          const isCheck = item.isCheck = true
          this.$refs.table.toggleRowSelection(item, isCheck)
        })
      } else {
        this.tableData.forEach(item => {
          item.isCheck = false
          this.$refs.table.clearSelection()
        })
        this.checkList = []
      }
    },

6.0 树形结构权限树形（难点）

          <!-- 树形结构 -->
          <el-tree
            ref="tree"
            :data="treeData"
            :expand-on-click-node="false"
            :props="defaultProps"
            :default-expanded-keys="treeNnfoldArray"
            :highlight-current="isHighlight"
            node-key="deptId"
            @node-click="setUserData"
            @node-expand="nodeExpand"
            @node-collapse="nodeCollapse"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span style="margin-right: 6px">
                <img src="./img/Process.png" >
              </span>
              <span style="margin-right: 6px">{{ node.label }}</span>
            </span>
          </el-tree>

7.0 Popover 弹出框嵌套只显示一个处理方案

      if (this.cacheDataItem) {
        this.cacheDataItem.visible = false
      }

8.0 绝对定位布局

        <el-drawer
          title="配置权限"
          :visible.sync="drawer"
          direction="rtl"
          :before-close="handleClose"
          size="40%">
          <div style="position: absolute;top:52px;left: 0;right: 0;bottom: 0;">
              <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 60px;overflow-y: auto;">
                  <el-tree
                    :data="ruleList"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :default-checked-keys="checkedKeys"
                    :props="defaultProps"
                    :check-strictly="true"
                    @check="check">
                  </el-tree>
              </div>
              <div style="height: 60px;position: absolute;bottom: 0;right: 0;left: 0;" class="border d-flex align-items-center px-3 bg-white">
                  <el-button @click="drawer = false">取消</el-button>
                  <el-button type="primary" @click="submitRules">确定</el-button>  
              </div>
          </div>
        </el-drawer>

9.0 element-ui promise自定义校验

 validator: async (rule, value)=>{
                // 请求判断用户是否存在
                let res = await that.certificate(value);
                if(res.status === 1)
                    return Promise.reject('用户名已存在');
                else return Promise.resolve('用户名可用');
            },

10.0 反复点击清除背景颜色问题

-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

11.0 防抖函数处理请求

this.debounce(this.getEmployeeQueryDepartmentUser, 600)

    debounce(fn, wait) {
      if (this.timer !== null) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(fn, wait)
    }