一、效果图

说明：点击 开始下划线 >> 该下拉项变成 结束上划线 >> 点击 结束上划线 >> 该下拉项又变回 开始下划线

二、代码实现

1. html部分

<a-form-model-item>
 <a-select v-model="form.insert" @select="insertClick" >
  <a-select-option :value="overlineValue">{{overline}}</a-select-option>
 </a-select>
</a-form-model-item>

2. js部分

data(){
 return {
  overline: '开始上划线',
  overlineValue: '\\O',
  form:{
   insert:''
  },
 }
}

insertClick() {
 if(this.form.insert === '\\O'){
  this.overline = '结束上划线'
  this.overlineValue = '\\o'
 }

 if (this.form.insert === '\\o') {
  this.overline = '开始上划线'
  this.overlineValue = '\\O'
 }
}

3. 效果见图
   说明：可以发现， 开始上划线 和 结束上划线 可以实现动态切换。但选中后输入框里面的内容是该项对应的value值，并不是我们想要的效果。

三、优化代码

1. html部分

<a-form-model-item>
 <a-select v-model="insertObj" @select="insertClick" :labelInValue="true" >
  <a-select-option :value="overlineValue">{{overline}}</a-select-option>
 </a-select>
</a-form-model-item>

2. js部分

data(){
 return {
  overline: '开始上划线',
  overlineValue: '\\O',
  form:{
   insert:''
  },
  insertObj:{}
 }
}

insertClick() {
 this.form.insert = this.insertObj.key
 // 设置上划线
 if (this.form.insert === '\\O') {
  this.overline = '结束上划线'
  this.overlineValue = '\\o'
 }
 
 if (this.form.insert === '\\o') {
  this.overline = '开始上划线'
  this.overlineValue = '\\O'
 }
}

3. 代码说明
   用到了select组件自带的 labelInValue参数，将select的value包装成了一个对象，这样就可以解决上述的问题。