el-select详解

197 阅读2分钟

由于将选项数据放在脚本中,会堆成屎山代码,所以我一般将其选项拆出去,以后方便修改选项和其中的值。一般以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 设置一个具体的宽度 。