vue中el-select中点击option显示其他内容如何实现

需要实现的样式：

当点击一天、一周时不显示日期选择器，点击自定时时显示日期选择器

html部分

需要添加@change事件，以获取option的值，并且在需要显示隐藏的部分添加v-show属性

      <el-form-item prop="group">
          <el-select v-model="dataValue"  @change="handleDataSelect">
            <el-option
              v-for="item in dataSelect"
              :key="item.dataValue"
              :label="item.dataLabel"
              :value="item.dataValue"
              >
            </el-option>
          </el-select>
      </el-form-item > 
      
      <需要控制显示隐藏的部分 需要添加v-show属性>
      <style样式已删除>
      <el-date-picker
        v-show="isShow"
        v-model="daterange"
        type="daterange"
        align="right"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="chooseTimeRange"
        :picker-options="pickerOptions"/>
      

js部分

在data中添加v-show绑定的值，为false时隐藏，true时显示。 所以我们只需要在change绑定的方法中获取option值，并进行判断，如果是第三项“自定时”时，把属性改为true即可。

 data(){
   return{
     isShow:false,
   }
 }
 
 
 methods: {
   handleDataSelect(event){
     if(event == '选项3'){
       this.isShow=true
     }else{
       this.isShow=false
    }
  },
}