Vue3學習（十八） - TreeSelect 樹選擇

寫在前面

本以為可以在家學習一天，結果家裡來了客人拜年，就沒學習上，有點小遺憾吧。

昨天完成從分類管理的前後端代碼複製出文檔管理的前後端代碼，遺留問題是只能選擇一級父分類。值得說的是，昨晚的遺留的問題修複了，開心。

遺留問題

點擊父文檔，彈出警告，從報錯來看那意思就是parent應該是一個對象，我卻給他一個string字元串。

解決方案：

將parent改造為對象：

node.parent = {'id': node.parent}

使用樹形選擇組件選擇父節點

1、從分類管理的前後端代碼複製出文檔管理的前後端代碼

此處略，參考以前

2、TreeSelect 樹選擇使用

其實就是將原來一級分類，改為可以多級分類選擇，這裡我們就用TreeSelect選擇來實現，示例代碼如下：

<a-tree-select
  v-model="docs_data"
  show-search
  style="width: 100%"
  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  placeholder="請選擇父文檔"
  tree-default-expand-all
  :tree-data="treeSelectData"
  :fieldNames="{label: 'name', key: 'id', value: 'id'}"
  >
</a-tree-select>

const treeSelectData = ref();
treeSelectData.value = [];          

3、增加對象拷貝及對應選中狀態設置

   /**
     * 將某節點及其子孫節點全部置為disabled
     */
    const setDisable = (treeSelectData: any, id: any) => {
      // 遍曆數組，即遍歷某一層節點
      for (let i = 0; i < treeSelectData.length; i++) {
        const node = treeSelectData[i];
        node.parent = {'id': node.parent}
        if (node.id === id) {
        // 將目標節點設置為disabled
        node.disabled = true;
        // 遍歷所有子節點，將所有子節點全部都加上disabled
        const children = node.children;
        if (Tool.isNotEmpty(children)) {
          for (let j = 0; j < children.length; j++) {
            setDisable(children, children[j].id)
          }
        }
      } else {
        // 如果當前節點不是目標節點，則到其子節點再找找看。
        const children = node.children;
        if (Tool.isNotEmpty(children)) {
          setDisable(children, id);
        }
      }
    }
  };


   /**
     * 編輯
     */
    const edit = (record: any) => {
      open.value = true;
      docs_data.value = Tool.copy(record);
      // 不能選擇當前節點及其所有子孫節點，作為父節點，會使樹斷開
      treeSelectData.value = Tool.copy(level1.value);
      setDisable(treeSelectData.value, record.id);
      // 為選擇樹添加一個"無"
      treeSelectData.value.unshift({id: 0, name: '無'});
    };

   /**
     * 新增
     */
    const add = () => {
      open.value = true;
      docs_data.value = {};
      treeSelectData.value = Tool.copy(level1.value);
      // 為選擇樹添加一個"無"
      treeSelectData.value.unshift({id: 0, name: '無'});
    };

    const level1 = ref(); // 一級文檔樹，children屬性就是二級文檔

    /**
     * 數據查詢
     **/
    const handleQuery = () => {
      loading.value = true;
      // 如果不清空現有數據，則編輯保存重新載入數據後，再點編輯，則列表顯示的還是編輯前的數據
      docs.value = [];
      axios.get("/doc/all", {}).then((response) => {
        loading.value = false;
        const data = response.data;
        if (data.success) {
          docs.value = data.content;
          level1.value = [];
          level1.value = Tool.array2Tree(docs.value, 0);
        } else {
          message.error(data.message);
        }
      });
    };  

4、效果

寫在最後

前端部分代碼，尤其對象拷貝部分，真的需要一定代碼功底，我會繼續努力的，相信很快我也能寫出這樣的代碼。

優秀不夠，你是否無可替代

軟體測試交流QQ群：721256703，期待你的加入！！

歡迎關註我的微信公眾號：軟體測試君