1、select与el-select动态绑定选择的数据

不太会改el组件的样式，所以采用了原版的选择器

<select id="newwork" v-model="NewworkYear" @change="chooseNewworkYear">
  <option
    v-for="(item, idx) in yearList"
    :key="idx"
    :label="item.year"
    :value="item.year"
  ></option>
</select>

<el-select v-model="NewworkYear" @change="chooseNewworkYear2" size="mini">
  <el-option
    v-for="(item, idx) in yearList"
    :key="idx"
    :label="item.year"
    :value="item.year"
  >
  </el-option>
</el-select>

select组件关键属性

let ac = document.getElementById(“newwork”)
let idx = ac.selectedIndex // 选中数据的索引
let value = ac.options[idx].value // 选中的最终值 :value

export default{
  data() {
    return {
      NewworkYear: new Date().getFullYear() // 默认今年年份
    }
  },
  props: {
    yearList: {
      type: Array, // 父组件传回来的数组对象列 [{year: 2021},{year: 2022}]
    },
  },
  methods: {
    chooseNewworkYear(val) {
      let ac = document.getElementById("newwork")
      let idx = ac.selectedIndex // 选中数据的索引
      let value = ac.options[idx].value // 选中的最终值 :value
      this.$emit("chooseNewworkYear", value) // 传给父组件的数据
    },

    chooseNewworkYear2(val) {
      this.$emit("chooseNewworkYear", val) // 传给父组件的数据
    },
  }
}

结果，select本身就小，el组件实在不会改那个小箭头了，有会的大神可以教教嘛