Vue3學習（十四）之 分類編輯功能優化 之 Select選擇器的使用

寫在前面

會比上周心情好多了，至少能做到坐在電腦前，雖然會時不時的溜號，但是能做到學習並輸出，收收心，相信一切都會好的。

不過說句實話，真的很害怕自己單身一輩子，想結婚，真的好想那種！

編輯功能優化

其實就是將之前默認的，控件做出調整，選擇更合適的展現形式，不能都是input框，那豈不是很無趣？

存在問題

新創建的分類，找不到該類的id，比如想在在新建類下面添加子分類，是找不到對應父分類的ID。

Select選擇器的使用

使用select選擇來解決，分類問題，示例代碼如下：

     <a-form-item label="父分類">
        <a-input v-model:value="categorys_data.parent"/>
        <a-select
            ref="select"
            v-model:value="categorys_data.parent"
            style="width: 120px"
        >
          <a-select-option value="0">無</a-select-option>
          <a-select-option v-for="c in level1 " :key="c.id" :value="c.id" :disabled="categorys_data.id===c.id">
            {{ c.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

結果如下所示：

這樣既解決了父分類ID不顯示的問題，也解決了父分類能選自己的問題。

知識點

v -for的使用，即Vue的基礎，忘了的話得多練練，參考遍歷item那個案例

    <a-select-option v-for="c in level1 " :key="c.id" :value="c.id" :disabled="categorys_data.id===c.id">
      {{ c.name }}
    </a-select-option>

寫在最后

其實本質就是select選擇器的使用啦，多看官網即可。

收收心，多學習，我還是我。