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>