分类 vue-element 下的文章

来自你的消息:

element ui el-select 过滤id=1的值 循环显示代码

来自ChatAI的消息:

你可以在 el-select 的数据源中使用数组的 filter 方法，过滤出不等于 1 的项，然后使用 v-for 循环显示。

以下是示例代码：

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' },
        { value: 3, label: '选项3' },
        { value: 4, label: '选项4' },
        { value: 5, label: '选项5' }
      ],
      selected: null
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(item => item.value !== 1)
    }
  }
}
</script>

在上面的代码中，options 是 el-select 的数据源，我们使用 computed 属性 filteredOptions 来过滤掉 value 等于 1 的项，然后在 v-for 中使用 filteredOptions 来循环显示 el-option。

希望这可以帮到你。

来自你的消息:

过滤多个值呢

来自ChatAI的消息:

如果你想要过滤多个值，可以使用 JavaScript 中的 Array.prototype.filter 方法和 Array.prototype.includes 方法。Array.prototype.includes 方法可以检查一个数组是否包含某个值。

以下是示例代码：

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' },
        { value: 3, label: '选项3' },
        { value: 4, label: '选项4' },
        { value: 5, label: '选项5' }
      ],
      selected: null
    }
  },
  computed: {
    filteredOptions() {
      const filtered = this.options.filter(item => {
        const excluded = [1, 3]; // 要过滤掉的值的数组
        return !excluded.includes(item.value);
      });
      return filtered;
    }
  }
}
</script>

在上面的代码中，我们使用一个名为 excluded 的数组来保存要过滤的值，然后我们在 filteredOptions 计算属性中使用 !excluded.includes(item.value) 来过滤掉这些值。

!excluded.includes(item.value) 表达式将会返回一个布尔值，如果 item.value 不是 excluded 数组中的元素，则为 true，表示该对象的 value 属性可以用于渲染 el-option 组件，否则为 false，表示需要将该对象过滤掉。

希望这对你有帮助。

  1. 1
  2. 2
  3. 3