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

久曲健發表於2024-02-25
Vue

寫在前面

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

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

遺留問題

點選父文件，彈出警告，從報錯來看那意思就是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、效果

寫在最後

前端部分程式碼，尤其物件複製部分，真的需要一定程式碼功底，我會繼續努力的，相信很快我也能寫出這樣的程式碼。

相關文章