vue中select值number类型回显问题

一般来说,select都需要回显下才正常。正常来说呢,只要写上对应的value和key啥的回显都问题不大。但是,如果是number类型,则需要注意!

option中value带冒号和不带冒号两种书写方式

                       <a-select v-model:value="xxx">
                        <a-select-option value="60" :key="60"
                          >1m</a-select-option
                        >
                        <a-select-option value="1800" :key="1800"
                          >30m</a-select-option
                        >
                        <a-select-option value="3600" :key="3600"
                          >1h</a-select-option
                        >
                        <a-select-option value="14400" :key="14400"
                          >4h</a-select-option
                        >
                        <a-select-option value="86400" :key="86400"
                          >1d</a-select-option
                        >
                      </a-select>

上面的写法,如果值得类型是string,那么没问题。

但是如果是number,则不会回显。

需要在前面加上冒号:

                       <a-select v-model:value="xxx">
                        <a-select-option :value="60" :key="60"
                          >1m</a-select-option
                        >
                        <a-select-option :value="1800" :key="1800"
                          >30m</a-select-option
                        >
                        <a-select-option :value="3600" :key="3600"
                          >1h</a-select-option
                        >
                        <a-select-option :value="14400" :key="14400"
                          >4h</a-select-option
                        >
                        <a-select-option :value="86400" :key="86400"
                          >1d</a-select-option
                        >
                      </a-select>

这样就可以顺利回显了。

【遇到这种小问题不要慌,先检查下基本的类型。】

猜你喜欢

转载自blog.csdn.net/chhpearl/article/details/126403337