el-select封装，根据字典类型生成字典下拉框

<template>
  <div class="dict">
    <!-- 字典下拉框公共组件 huang -->
    <el-select v-model="selValue" :placeholder="placeholder" :size="size" @change="changeHandle">
      <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key" />
    </el-select>
  </div>

</template>

<script>

import { listDictItem } from '@/api/base/dict'
export default {
  components: { },
  props: {
    placeholder: {
      type: String,
      default: () => '选择'
    },
    style1: {
      type: String,
      default: () => ''
    },
    size: {
      type: String,
      default: () => 'small'
    },
    group: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: () => ''
    }

  },
  data() {
    return {
      options: [
      ],
      selValue: '',
      dictQuery: {}
    }
  },
  watch: {
    // huang
    group(val) {
      this.dictQuery.dictGroupCode = val
      this.listDict()
    },
    options(val) {
      console.log(val)
    },
    value(val) {
      this.selValue = '' + val
    }
  },
  created() {

  },
  mounted() {
    this.dictQuery.dictGroupCode = this.group
    this.listDict()
  },
  methods: {
    changeHandle(val) {
      this.$emit('input', val)
    },
    listDict() {
      console.log('this.dictQuery', this.dictQuery)
      listDictItem(this.dictQuery).then(response => {
        this.options = response.data
        this.selValue = '' + this.value
      })
    }
  }

}
</script>
<style lang="less" scoped>
  .dict{
    margin: 0px;
    padding: 0px;
  }
// 优化记录：回填赋值时增加 '' (this.selValue = '' + val)解决数字字典值不能回填的问题，即强制转成字符
// 在之前监听回显值变化赋值回填值之外在下拉数据读取完成后赋值回填值，解决部分场景不能回填选中值的问题
</style>

 

 

封装好的字典查询下拉框，作用是 减少重复劳动，使代码简洁。也可后期缓存也可以在组件中增加

之前卡在子组件修改父组件传过来的属性的问题上，后来百度找了一下找到答案了 ，

一下是引用如下

https://www.cnblogs.com/zero-zm/p/12102693.html

 

Vue 子组件更新props中de属性值

更多vue实战：https://www.yuque.com/smallwhy/fmgz6r

在子组件中更新props中的属性值，并且更新到父组件，有两种实现方式：.sync 和 自定义v-model

1、.sync属性

• 父组件在给子组件传值时，属性名后需要加修饰符.sync，格式 :子组件props属性名.sync
• 子组件向上弹射事件给父组件时，事件名必须为格式 update:props属性名

父组件

<template>
<div id="app">
    // 注意点一、:show后跟修饰符.sync
    // 等同于<my-componen :show="valueChild" @update:show="val => valueChild= val" />
    <my-component :show.sync='valueChild' />
</div>
</template>
<script>
export default {
    data(): {
        return {valueChild: false}
    }
}
</script>

子组件

<template>
    <h3>{{show}}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
   props: {
       show: { type: Boolean, default: false}
    } ,
    methods: {
        eventOpt() {
            // 注意二、事件名必须为update:属性名
            // 更改prop中的属性show的属性值，同时更新父组件中中valueChild的属性值
             this.$emit('update:show', false);
        }
    }
}
</script>

2、v-model应用

• 子组件定义的属性名必须为 value
• 父组件向上弹射事件给子组件时，事件名必须为 input

父组件

<template>
<div id="app">
   // 等同于<my-componen :value="valueChild" @input="val => valueChild= val" />
    <my-component :value='valueChild' />
</div>
</template>
<script>
export default {
    data(): {
        return {valueChild: false}
    }
}
</script>

子组件

<template>
    <h3>{{show}}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
   props: {
     // 注意点一、属性名必须为value
      value: { type: Boolean, default: false}
    } ,
    methods: {
        eventOpt() {
            // 注意二、事件名必须为input
            // 更改prop中的属性show的属性值，同时更新父组件中中valueChild的属性值
             this.$emit('input', false);
        }
    }
}
</script>

比较

_

• v-model 子组件只能更改props中的一个属性值value；
• .sync 子组件可以更改props中的多个属性值；