vue和elementUI中下拉选选中时触发方法，改变列表中选中数据，通过锚点定位进行滚动展示

vue和elementUI中下拉选选中时触发方法，改变列表中选中数据，通过锚点定位进行滚动展示

实现：

• 主要是运用了js锚点的方法，进行页面滚动到选中的列表显示出来；
• select的change事件触发锚点方法

location.href= '#ID'

效果图：

方便观察，将select放在了列表下面

完整代码：

<template>
  <div class="about">
    <div class="cont-ul">
      <ul>
        <li v-for="item in options"
            :key="item.value"
            :class="{selected: clickValue === item.value}"
            :id="item.value"
            @click="getData(item.value)">
          {{item.label}}
        </li>
      </ul>
    </div>
    <el-select v-model="selectValue" @change="selectChange" filterable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { value: 'a1', label: '黄金糕'},
          { value: 'a2', label: '双皮奶'},
          { value: 'a3', label: '蚵仔煎'},
          { value: 'a4', label: '龙须面'},
          { value: 'a5', label: '北京烤鸭'},
          { value: 'a6', label: '龙6须面'},
          { value: 'a7', label: '龙7须面'},
          { value: 'a8', label: '龙8须面'},
          { value: 'a9', label: '龙9须面'},
          { value: 'a10', label: '龙10须面'}
          ],
        selectValue: '', // 下拉选 选中值
        clickValue: ''  // 为了点击时，下拉选选中数据也跟随变化，定义新变量接收最终值
      }
    },
    methods: {
      // 下拉选改变触发方法
      selectChange (val) {
        this.getData(val)
        location.href= `#${this.selectValue}`
      },
      getData (val) {
        this.clickValue = val
        console.log(`你选中了：${this.clickValue}`)
      }
    }
  }
</script>
<style scoped lang="less">
  .cont-ul{
    border: 1px solid #2c3e50;
    height: 150px;
    width: 200px;
    overflow: auto;
    ul{
      list-style: none;
      li{
        cursor: pointer;
      }
    }
  }
  .selected{
    color: #42b983;
  }
</style>