element-ui select组件中复选时以字符串形式显示

在 element-ui 的 select 组件中，如果设置了 multiple 属性，那么就可以进行多选，但是默认情况下选择的值是以数组形式返回的。如果需要以字符串形式显示，可以使用 Vue.js 中的计算属性来处理。

首先，需要将 select 组件的 v-model 绑定到一个数组类型的数据上，例如：

<el-select v-model="selectedOptions" multiple>
  <el-option label="Option 1" value="option1"></el-option>
  <el-option label="Option 2" value="option2"></el-option>
  <el-option label="Option 3" value="option3"></el-option>
</el-select>

然后，在 Vue.js 中定义一个计算属性，将选中的值转换成字符串形式。例如：

computed: {
  selectedOptionsString() {
    return this.selectedOptions.join(', ');
  }
}

最后，在页面中使用这个计算属性来显示选中的值。例如：

<p>Selected options: {{ selectedOptionsString }}</p>

这样就可以实现在 element-ui select 组件中多选时以字符串形式显示选中的值了。

相关问题

Element-UI 实现el-select下拉框自定义可以过滤选项，可以全选

Element UI 的 `el-select` 组件是一个常用的下拉选择组件，它允许用户通过输入筛选选项。如果你想实现自定义筛选并支持全选功能，你可以通过以下几个步骤操作：

1. **绑定数据**: 首先，你需要将需要展示的选项作为数组传入 `el-select` 的 `options` 属性，并保持一个原始未过滤的数据源。

<template>
  <el-select v-model="selectedValue" filterable 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: [
        ... // 原始选项数组
      ],
      selectedValue: '',
      filteredOptions: []
    }
  },
  computed: {
    // 过滤函数可以根据某个字段对原始选项进行筛选
    filteredOptions() {
      const searchKey = this.selectedValue.trim();
      if (!searchKey) {
        return this.options;
      } else {
        return this.options.filter(item => item.label.includes(searchKey));
      }
    }
  }
}
</script>

2. **全选功能**: 可以添加一个单独的开关或按钮，当切换到全选模式时，遍历所有选项设置 `selectedValue` 为它们的值。取消全选则清空 `selectedValue` 或将其设为空字符串。

<!-- 添加一个全选按钮 -->
<template>
  <div>
    <el-select v-model="selectedValue" ...>
      ...
    </el-select>
    <button @click="selectAll">全选</button>
  </div>
</template>

<script>
methods: {
  selectAll() {
    if (this.options.length > 0) {
      this.selectedValue = this.options.map(item => item.value).join(',');
    } else {
      this.selectedValue = '';
    }
  },
  unselectAll() {
    this.selectedValue = '';
  }
}
</script>

这样，用户就可以在输入框中搜索选项，同时也可以通过全选按钮快速选择所有项目。记得在实际项目中根据需求调整细节。

element-ui 关于获取select 的label值方法

在 Element-UI 中，获取 Select 组件的 Label 值可以使用 ref 和 .getLabelText() 方法。首先，在 Select 组件上设置 ref 属性，如下所示：

<el-select v-model="selectedOption" ref="mySelect">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

接下来，在 JavaScript 中可以通过 this.\$refs.mySelect.getLabelText() 来获取选中项的 Label 值（如果是多选，则返回一个数组）。代码如下所示：

data() {
  return {
    selectedOption: '',
    options: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
    ]
  }
},
methods: {
  getSelectedOptionLabel() {
    const label = this.$refs.mySelect.getLabelText()
    alert(`当前选中项的 Label 是 ${label}`)
  }
}

需要注意的是，如果 Select 组件未选中任何项，则 .getLabelText() 方法将返回空字符串。因此，在获取 Label 值前需要判断选中项是否为空。

另外，对于滚动加载数据的 Select 组件，它的选项是异步加载的，此时需要等待选项加载完成后再使用 .getLabelText() 方法获取 Label 值。可以通过监听 Select 组件的 visible-change 事件来判断选项是否加载完成。代码如下：

<el-select v-model="selectedOption" ref="mySelect" @visible-change="onSelectVisibleChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

data() {
  return {
    selectedOption: '',
    options: null,
  }
},
methods: {
  async onSelectVisibleChange(isVisible) {
    if (isVisible) {
      // 模拟异步加载数据
      this.options = null
      await new Promise(resolve => setTimeout(() => {
        this.options = [
          { value: 1, label: '选项一' },
          { value: 2, label: '选项二' },
          { value: 3, label: '选项三' },
        ]
        resolve()
      }, 1000))
      this.$nextTick(() => {
        const label = this.$refs.mySelect.getLabelText()
        alert(`当前选中项的 Label 是 ${label}`)
      })
    }
  }
}