vue-element-admin框架中elementUI的select下拉列表設置默認值

官網elementUI中的下拉組件select是不帶默認值的，如何使其默認加載，可參考如下方案。

做了一個組件，可公用調用。

先看下效果

 

 主要涉及就是父組件傳子組件，及子組件回傳父組件的傳值操作。

下拉組件代碼：

<template>
  <el-select
    v-model="dataValue"
    style="width: 200px"
    placeholder="請選擇"
    @change="valueChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script type="text/javascript">
import stringMixin from "./stringMixin";

export default {
  name: "XhJSSelect",
  components: {},
  props: {
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dataValue: "",
    };
  },
  created() {},
  watch: {
    options: {
      handler(newVal) {
        if (newVal == "" || newVal == "undefined") {
          //TODO
        } else {
          this.dataValue = this.options[0].value;
        }
      },
      immediate: true,
    },
  },
  computed: {},
  methods: {
    // 輸入的值
    valueChange(val) {
      /** 回調篩選數據 */
      this.$emit("value-change", {
        index: this.index,
        value: val,
        data: this.options,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

傳的options是數組，下拉選擇事件valueChange，用emit回傳父組件相關需要的值。

父組件調用

引用組件：

import XhJSSelect from "@/components/CreateCom/Xh-JS-Select.vue";

添加組件

components: { Pagination, CRMTableHead, importExcel, XhJSSelect },

調用：

    <XhJSSelect
        :options="versionList"
        style="width: 200px"
        class="search-container"
        @value-change="selectValue"
      ></XhJSSelect>

下拉選擇事件

 selectValue(params) {//版本下拉選擇
      this.versionValue = params.value;
      this.getList();
    },