[Enhancement] [segmented] The "el-segmented" control cannot return to the unselected state through binding values after an option is selected.

[haifenggo]

Feature type: Enhancement

Details

• Enhanced component name: segmented

Description

The "el-segmented" control can default to having no option selected, but once an option is selected, it cannot be returned to the unselected state; that is to say, the highlight cannot be removed. Setting the model-value/v-model binding to null or undefined does not work; only the text color changes from white to black when selected, but the default background remains blue.

el-segmented默认可以未选中任何一个选项，但是一旦选中一个选项后，无法通过来恢复到未选择状态，也就是说无法去除高亮状态。model-value/v-model绑定值设为null和undifined都不行，只有字体从选中状态的白色转为黑色，但默认背景仍是蓝色。

Additional comments

(empty)

[DDDDD12138]

没有吧，我看着是正常的: segmented demo

[haifenggo]

我在你提供的Playground那里写了我的不能正常消除高亮的demo。

demo是有两个segmented，两个都点高亮后，然后通过watch来进行清除另一个高亮，但是只有字体从选中状态的白色转为黑色，背景仍是蓝色。

<template>
  <div class="flex flex-col items-start gap-4">
    <el-segmented v-model="value" :options="options" />
  </div>
  <ElButton @click="value = -1">清空value</ElButton>
       <el-segmented class="common-java" v-model="activeCommonCode" :options="CommonCodeOptions"
                      direction="vertical" :block="false"
                      size="small"
                      @change="changeCommonCode"/>
      <el-segmented class="frontend-code" v-model="activeFrontendCode" :options="frontendCodeOptions"
                      direction="vertical" :block="false"
                      size="small"
                      @change="changeFrontendCode"/>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
// *******************************************************
const commonCode = ref(null);
const activeCommonCode = ref('')
const CommonCodeOptions = ref([
  'a',
  'b',
  'v',
  'd',
  'e',
  'f',
  'g'
])
async function changeCommonCode(val) {
  activeCommonCode.value = val
}
// *******************************************************
const frontendCode = ref({})
const activeFrontendCode = ref('')
const frontendCodeOptions = ref([
    '1',
    '2',
    '3',
])
async function changeFrontendCode(val){
  activeFrontendCode.value = val
}
// *******************************************************
watch(activeFrontendCode, (val) => {
  if (frontendCodeOptions.value.includes(val)) {
    activeCommonCode.value = null
  }
});
// *******************************************************
const value = ref('')

const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
</script>

[DDDDD12138]

确实是个 BUG ，你去提个 issues 吧

[DDDDD12138]

看看这样是不是可以了呢： demo

[thinkasany]

确实有问题，#18818 这个pr 会处理这个问题