Vue进阶知识笔记

飞熊 • 2023年7月28日下午4:06 • 技术随笔 • 阅读 200

一、前端拦截与参数获取

当我们写Java后台的时候，常常用到filter来进行一些过滤拦截。前端实际上也有类似的功能，称为响应拦截。
在Vue中怎么实现这种功能呢？
第一步：进入router/index.js
第二步：末尾添加

/**
 *  拦截
 */
router.beforeEach((to, from, next) => {
  if(to.path='/login'){...}
  if(to.query.key === ?){...}
})

其中：to.path是来访Mapping，如www.baidu.com/login中的’/login’。
to.query.key是取出路径中主键为’key’的参数的值
通过这样的操作，我们就可以很容易的在访问符合某种规则时做出响应的方法

二、配合Element中的select、option、和tree实现复杂的多级下拉框

效果：

1、标签嵌套结构：

<el-select v-model="treeNodeName" placeholder="选择区域">
            <el-option :value="treeNode" style="padding: 0px;">
              <el-tree
                ref="selectTree"
                :props="props"
                :load="loadNode1"
                lazy
                :node-key="treeId"
                :default-expanded-keys="defaultExpandedKey"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </el-option>
          </el-select>

说明：treeNodeName是双向绑定，承载最终的选择结果，:value=”treeNode”指的是当前选择的那一条选项实际指向的数据，ref可以近似地理解为id。load则是结点加载函数。由于采用懒加载，所以只有当某一个对应条目被点击时，才会触发加载子节点的函数。handlecodeClick函数则是用于处理点击某个结点时将数值读取到绑定值上。props是配置选项，配置选项中的配置值必须和实体类的字段相对应：

props: {
        id: 'id',
        label: 'name',
        children: [],
        isLeaf: true
      },

那么，node的字段就必须是id,name,children
js部分：
1、设置默认配置：

// 初始化值
    initHandle() {
      if (this.valueId) {
        this.data = this.$refs.selectTree.getNode(this.valueId).data.title // 初始化显示
        this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
        this.defaultExpandedKey = [this.valueId] // 设置默认展开
      }
    }

2、结点加载：

// 加载树结点
    loadNode1(node, resolve) {
      if (node.data) {
        this.treeId = node.data.id
      }
      if (node.level === 0) {
        const getTreeID = JSON.stringify({
          id: ''
        })
        this.$http.post(this.$http.Url('/test/getNode.do'), getTreeID, { emulateJSON: true }).then(({ data }) => {
          return resolve(data)
        })
      }
      if (node.level >= 1) {
        const getTreeID = JSON.stringify({
          id: this.treeId
        })
        this.$http.post(this.$http.Url('/test/getNode.do'), getTreeID, { emulateJSON: true }).then(({ data }) => {
          if (data.length === 0) {
            return resolve([])
          }
          return resolve(data)
        })
      }
    }

3、处理节点点击事件

handleNodeClick(node) {
      // this.dataForm.areaCode = node.id
      this.treeNodeName = node.name
      this.id= node.id
      this.defaultExpandedKey = []
    }

后台对应的结点实体类：

public class ZtreeNode {
	private long id;// 结点id
	private String code;// 结点编码
	private String name;// 节点名称
	private Integer grade;// 结点级别
	private Integer displayOrder;// 显示顺序
	private Integer pId;// 父节点id
	private Boolean open; // 是否展开
	private Boolean isParent;// 是否是父节点
	private int currentState;// 当前状态（是否删除等）
}