由于将选项数据放在脚本中,会堆成屎山代码,所以我一般将其选项拆出去,以后方便修改选项和其中的值。一般以json文件的形式放在public中,之后使用axios调用即可。
例:
const chgxData = ref([])
function getchgxJson() {
axios.get('/chgx.json').then((res => {
chgxData.value = res.data
}))
}
getchgxJson()
1.大小:想要改变输入框和其中文字大小,可以
:deep(.el-select--large .el-select\_\_wrapper)
2. 属性
①multiple:是否支持多选。开启多选模式后,用户可以选择多个选项。
<el-select v-model="selectedValues" multiple placeholder="请选择多个选项">
\<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
const selectedValues = ref(\[]);
const options = ref(\[
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]);
②clearable: 是否显示清空按钮。点击该按钮会清空选择框的内容
③filterable: 是否支持搜索过滤。开启搜索过滤后,用户可以在选择框中输入关键字来过滤选项。
④allow-create: 是否允许用户创建新条目。开启后,用户可以输入不存在的选项并将其添加到选择列表中。
⑤remote: 是否支持远程搜索。开启后,输入框中的内容会触发 remote-method 方法,用于从服务器获取数据。
<el-select v-model="selectedValue" placeholder="请选择" filterable remote :remote-method="remoteMethod">
\<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
const selectedValue = ref('');
const options = ref(\[]);
const remoteMethod = (query) => {
if (query !== '') {
// 模拟从服务器获取数据
setTimeout(() => {
const results = \[
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
options.value = results;
}, 200);
} else {
options.value = \[];
}
};
⑥popper-class:自定义下拉菜单的类名。用于自定义下拉菜单的样式。
在el-select中加入popper-class="custom-popper-class",便可在css中直接设置样式。
⑦popper-append-to-body: 下拉菜单是否插入至 body 元素。在某些情况下,设置为 false 可以解决滚动条问题。
⑧插槽empty:选项为空时的插槽内容。可以自定义显示的内容,例如提示信息或图片。
<el-select v-model="selectedValue" placeholder="请选择">
\<template #empty>
<div style="text-align: center; padding: 10px;">
<p>暂无数据</p>
<img src="/path/to/empty-image.png" alt="Empty Image转存失败,建议直接上传图片文件">
</div>
</template>
\<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
3.注意点:el-select默认宽度变为 100%。如果 el-select 在行内表单中宽度会塌陷,需要给 el-select 设置一个具体的宽度 。