返回

动态搜索，值不可删：Vue + Element UI Select 组件进阶应用

前端

如何在 Vue + Element UI 中实现 Select 组件的远程搜索和默认值不可删除

远程搜索

在实际开发中，表单交互往往需要根据输入的内容进行动态搜索和匹配，这可以极大提升用户体验。Element UI 提供了强大的 Select 组件，支持丰富的功能和高度的定制性。本文将深入探究如何使用 Vue + Element UI 实现 Select 组件的远程搜索功能。

实现步骤

  1. 创建一个数据源，包含需要搜索的数据。
  2. 在 Vue 组件中，使用 remote 属性来启用远程搜索功能，并指定数据源的 URL。
  3. 实现 filterMethod 方法，在用户输入时对数据源进行过滤。

代码示例

<template>
  <el-select v-model="value" remote filterable placeholder="请输入搜索内容" :remote-method="filterMethod">
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.value"></el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue'
import { ElSelect } from 'element-plus'

export default {
  components: { ElSelect },
  setup() {
    const options = ref([]) // 数据源

    const value = ref([]) // 选中的值

    const filterMethod = (query, loading) => {
      // query 为用户输入的内容
      loading(true)
      // 这里可通过接口获取远程数据，这里简化处理
      setTimeout(() => {
        options.value = [
          { id: 1, name: '张三', value: 'zhangsan' },
          { id: 2, name: '李四', value: 'lisi' },
          { id: 3, name: '王五', value: 'wangwu' },
        ].filter(item => item.name.includes(query))
        loading(false)
      }, 300)
    }

    return {
      value,
      options,
      filterMethod,
    }
  },
}
</script>

默认值不可删除

对于某些场景，我们希望默认的选项不可删除。Element UI 也提供了灵活的配置来满足这一需求。

实现步骤

  1. 在 ElSelect 组件上添加 disabled 属性。
  2. 在 mounted 钩子函数中，遍历选项并查找默认值，设置其 disabled 属性为 true。

代码示例

<template>
  <el-select v-model="value" remote filterable placeholder="请输入搜索内容" :remote-method="filterMethod" disabled>
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.value"></el-option>
  </el-select>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElSelect } from 'element-plus'

export default {
  components: { ElSelect },
  setup() {
    const options = ref([]) // 数据源

    const value = ref([]) // 选中的值

    const filterMethod = (query, loading) => {
      // 这里简化处理，实际开发中可通过接口获取远程数据
      setTimeout(() => {
        options.value = [
          { id: 1, name: '张三', value: 'zhangsan' },
          { id: 2, name: '李四', value: 'lisi' },
          { id: 3, name: '王五', value: 'wangwu' },
        ].filter(item => item.name.includes(query))
        loading(false)
      }, 300)
    }

    onMounted(() => {
      // 查找默认值并设置 disabled 属性为 true
      const defaultValue = 'zhangsan' // 这里为示例，实际默认值需根据业务场景确定
      const defaultOption = options.value.find(item => item.value === defaultValue)
      if (defaultOption) {
        defaultOption.disabled = true
      }
    })

    return {
      value,
      options,
      filterMethod,
    }
  },
}
</script>

通过以上步骤，我们实现了 Vue + Element UI Select 组件的远程搜索功能和默认值不可删除功能。这种动态交互方式可以大幅提升表单的易用性和效率。

常见问题解答

  1. 如何自定义远程搜索的请求参数？
    答：可以使用 remote-method 属性的第二个参数 params 来传递请求参数。

  2. 如何控制远程搜索的显示方式？
    答：可以使用 loading 属性来控制加载状态的显示，可以使用 loading-text 属性来自定义加载时的文本。

  3. 如何禁用远程搜索功能？
    答：可以将 remote 属性设置为 false 来禁用远程搜索功能。

  4. 如何设置默认值？
    答：可以使用 value 属性来设置默认值。

  5. 如何判断 Select 组件是否处于 disabled 状态？
    答：可以使用 disabled 属性来判断 Select 组件是否处于 disabled 状态。