exam/exam-06173-vue/src/components/DicListSelect/index.vue

<template>
  <el-select
    v-model="currentValue"
    :disabled="disabled"
    :placeholder="title"
    :remote-method="fetchData"
    filterable
    remote
    reserve-keyword
    clearable
    automatic-dropdown
    class="filter-item"
    @change="handlerChange"
  >
    <el-option
      v-for="(item, index) in dataList"
      :key="index"
      :label="item.title"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { fetchTree } from "@/api/sys/dict/value";

export default {
  name: "DicListSelect",
  props: {
    dicCode: String,
    title: String,
    value: String,
    disabled: Boolean,
    excludes: Array,
  },
  data() {
    return {
      // 下拉选项值
      dataList: [],
      currentValue: "",
    };
  },

  watch: {
    // 检测查询变化
    value(val) {
      this.currentValue = val;
    },
  },
  created() {
    this.currentValue = this.value;
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetchTree({ dicCode: this.dicCode, excludes: this.excludes }).then(
        (response) => {
          this.dataList = response.data;
        }
      );
    },
    handlerChange(e) {
      this.$emit("change", e);
      this.$emit("input", e);
    },
  },
};
</script>

<style scoped>
/deep/ .el-form-item--medium .el-form-item__content {
  line-height: 20px;
}
</style>