Vue3学习（十四）之 分类编辑功能优化 之 Select选择器的使用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

写在前面

会比上周心情好多了，至少能做到坐在电脑前，虽然会时不时的溜号，但是能做到学习并输出，收收心，相信一切都会好的。

不过说句实话，真的很害怕自己单身一辈子，想结婚，真的好想那种！

编辑功能优化

其实就是将之前默认的，控件做出调整，选择更合适的展现形式，不能都是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选择器的使用啦，多看官网即可。

收收心，多学习，我还是我。

以上是 Vue3学习（十四）之 分类编辑功能优化 之 Select选择器的使用 的全部内容， 来源链接： utcz.com/z/380029.html

回到顶部