Vue進階知識筆記

一、前端攔截與參數擷取

當我們寫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;// 目前狀态（是否删除等）
}