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();
    },