el-select+span（更多）实现内容展示由少变全

效果：在el-select展示的内容中加入span，点击span，展示内容变为全部

<template>
 <div>
  <el-form :model="form" :inline="true" :rules="rule">
    <el-form-item label="事例" prop="dataRadio">
      <el-select v-model="dataRadio" @change="showDataLabel">
          <el-option v-for="item in list" :label="item.label" :key="item.value" 
                    :value="item.value">{{item.label}}</el-option>
            <span @click="changeSelectContent" style="display: block;float: right;margin:10px;cursor: pointer" v-show="controlMore">
            <i class="el-icon-plus"></i>更多</span>
      </el-select>
    </el-form-item>
  </el-form>
 </div>
</template>


<script>
//dataRadio作为传参传到后台
function showDataLabel(id) {
    this.allDataList.map(item=>{
      if (item.value === id){
        this.dataRadio = item.label
      }
    })
  }

  //修改下拉内容
  function changeSelectContent(){
    this.controlMore = false
    this.list = this.allDataList
  }

  //下拉框隐藏后 更多按钮显示出来
  function changeSelectVisible(val){
    if (!val){
      this.controlMore = true
      this.list = this.someDataList
    }
  }


export default{
   data(){
      return{
        form: {},        
        controlMore: true,
        someDataList: [
          {label: '测试', value: '123213121'},
          {label: '测试1', value: '5634534'},
          {label: '测试2', value: '2234325436'},
          {label: '测试3', value: '3756757652'},
        ],
        allDataList: [
          {label: '测试', value: '123213121'},
          {label: '测试1', value: '5634534'},
          {label: '测试2', value: '2234325436'},
          {label: '测试3', value: '3756757652'},
          {label: '测试4', value: '2132144333'},
          {label: '测试5', value: '63345234242'},
          {label: '测试6', value: '346345211232'},
          {label: '测试7', value: '657658685756'},
        ],
        list: [],
        dataRadio: '',
      }
    },
    methods:{
       showDataLabel,
       changeSelectContent,
       changeSelectVisible,
    },
    created(){
      this.list = this.someDataList
    }
}

</script>

应用：首先展示的是最新的数据，更多按钮里点开的数据包含了历史数据