vue.js - el-select全选时隐藏已选项标签？

Question

el-select多选模式，在全选时会把所有已选项通过Tags显示在选择框中，如图

我现在希望在选择全部时，不显示这些Tags。而是仅显示全部两个字。如图

Answer 1

你可以拿这个改吧改吧应该能用

https://codepen.io/1127056420/full/YzgMMqr

Answer 2

Demo效果:

Demo代码:

<template>  <el-select @change="change" @remove-tag="removeTag" v-model="value5" multiple placeholder="请选择">    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">    </el-option>  </el-select></template><script>export default {  data() {    return {      options: [{        value: '选项1',        label: '黄金糕'      }, {        value: '选项2',        label: '双皮奶'      }, {        value: '选项3',        label: '蚵仔煎'      }, {        value: '选项4',        label: '龙须面'      }, {        value: '选项5',        label: '北京烤鸭'      }],      value5: [],      originVal: []    }  },  methods: {    change() {      if (this.value5.length === this.options.length) {        this.originVal = [...this.value5]        this.value5 = ['全部']      }      console.log(this.value5, this.originVal);    },    removeTag(value) {      if (value === '全部') {        this.originVal = []        console.log(this.value5, this.originVal);        this.value5 = []      }    }  }}</script>

Answer 3

在 Element UI 的 el-select 组件中，你可以通过监听 change 事件来达到这个效果。当用户选择全选时，你可以清除已选项的标签。

以下是一个简单的示例：

<template>  <el-select v-model="value" multiple placeholder="请选择" @change="handleChange">    <el-option      v-for="item in options"      :key="item.value"      :label="item.label"      :value="item.value">    </el-option>  </el-select></template><script>export default {  data() {    return {      options: [{        value: '选项1',        label: '黄金糕'      }, {        value: '选项2',        label: '双皮奶'      }, {        value: '选项3',        label: '蚵仔煎'      }, {        value: '选项4',        label: '龙须面'      }, {        value: '选项5',        label: '北京烤鸭'      }],      value: []    }  },  methods: {    handleChange(value) {      if (value.length === this.options.length) {        // 全选时，隐藏已选项标签，仅显示“全选”标签        this.$refs.select.clearSelection();      } else {        // 非全选时，显示已选项标签        this.$refs.select.showTagCloseIcon(); // 显示已选项标签的关闭图标，用户可以手动删除已选项标签      }    }  }}</script>

在这个示例中，handleChange 方法会在用户选择或取消选择一个选项时被调用。如果用户选择了所有的选项，那么我们使用 clearSelection 方法清除所有已选项的标签，仅显示“全选”标签。如果用户没有选择所有的选项，那么我们使用 showTagCloseIcon 方法显示已选项标签的关闭图标，用户可以手动删除已选项标签。