前端菜鸡流水账日记 -- select下拉框单选改多选

哈喽哇大家，感觉好久不见咯，儿童节过的还开心嘛，hhh，昨天我可没有偷懒，我是上班了的，只不过没有遇到什么问题，所以呢就没有分享，这不是今天就遇到了就来了！

那让我们步入正题吧

我今天要说的是ant下的select下拉框，正常的使用的话，配置好ant然后引用就是这样的

                    <a-select
                        style="
                            width: 300px;
                            border: 1px #ccc solid;
                            border-radius: 8px;
                        "
                        allowClear
                        v-model:value="opt1Val"
                        placeholder="请选择设备名称"
                        @change="selectOpt1Change"
             
                    >
                        <a-select-option
                            v-for="(opt, index) in options1"
                            :key="index"
                            :value="opt.no"
                            >{{ opt.deviceName }}</a-select-option
                        >
                    </a-select>

v-model、placeholder、@change以及样式的设置我们就不多说了，大家肯定也都知道，默认的下拉框就是单选的，如果要改为多选也是非常的简单，只需要多加一个mode = ’multiple‘就可以了，修改过的代码就是

<a-select
                        style="
                            width: 300px;
                            border: 1px #ccc solid;
                            border-radius: 8px;
                        "
                        allowClear
                        v-model:value="opt1Val"
                        placeholder="请选择设备名称"
                        @change="selectOpt1Change"
                        mode= 'multiple'   //多选属性
                    >
                        <a-select-option
                            v-for="(opt, index) in options1"
                            :key="index"
                            :value="opt.no"
                            >{{ opt.deviceName }}</a-select-option
                        >
                    </a-select>

好啦，修改这个很简单，但是不要忘记了将绑定的v-model的值之类的同步更改为[]，否则可是会报错滴，然后呢我们就来到了一个非常重要的知识点，我每次都会遇到的，其实也不难，就是对我来说些许复杂，那就是改为多选之后，默认的值placeholder为自动跑到右边去，不自动居左了，所以就需要我们对其进行设置

相信你们也看到了代码中没有体现，所以说明简单的style控制不住他，所以要怎么写呢，要打开我们的控制台，然后找到元素，然后一个一个的对比，找到对应的placeholder，然后进行设置，就像代码所示，同时结合图片：要加deep和import 深度控制，并且优先级最高

// ant-select-selection-placeholder
:deep(.ant-select-selection-placeholder) {
    text-align: left;
}

具体的查找的方法就是好啦，这样我们就实现了想要的效果了我也不多说啦，我要准备下班啦，本来还想再分享一篇的，但是被耽误了点，等明天有时间我在继续分享，明天见~