vue elementui 封装组件 此组件根据configjs动态展示input或者select或switch 同时满足用户选择select值时 动态变化configjs的内容

可以按照以下步骤封装一个根据config.js动态展示不同表单组件的组件：

1. 创建一个名为DynamicForm的Vue组件。
2. 在组件的props中定义一个名为config的属性，用于接收config.js的内容。
3. 在组件的data中定义一个名为selectedValue的属性，用于保存用户选择的select值。
4. 在组件的template中根据config的内容动态展示不同的表单组件，例如使用v-if指令判断config中的type字段，如果是input则展示<el-input>，如果是select则展示<el-select>，如果是switch则展示<el-switch>。
5. 在表单组件中，根据需要绑定v-model指令，使用selectedValue作为值的绑定。
6. 在<el-select>组件中，可以使用v-on:change监听选择变化事件，并在事件处理函数中动态更新config的内容。

以下是一个示例代码：

<template>
  <div>
    <template v-if="config.type === 'input'">
      <el-input v-model="selectedValue"></el-input>
    </template>
    <template v-else-if="config.type === 'select'">
      <el-select v-model="selectedValue" @change="handleChange">
        <el-option v-for="option in config.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
    </template>
    <template v-else-if="config.type === 'switch'">
      <el-switch v-model="selectedValue"></el-switch>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedValue: ''
    }
  },
  methods: {
    handleChange(value) {
      this.selectedValue = value;
      // 更新config.js的内容，例如将选择的值存入config.js中
      this.config.selectedValue = value;
    }
  }
}
</script>

在使用该组件的地方，可以传入config.js的内容作为config属性的值，例如：

<template>
  <div>
    <dynamic-form :config="config"></dynamic-form>
  </div>
</template>

<script>
import DynamicForm from './DynamicForm.vue';

export default {
  components: {
    DynamicForm
  },
  data() {
    return {
      config: {
        type: 'select',
        options: [
          { label: 'Option 1', value: 'option1' },
          { label: 'Option 2', value: 'option2' },
          { label: 'Option 3', value: 'option3' }
        ],
        selectedValue: ''
      }
    }
  }
}
</script>

这样，当用户选择<el-select>中的值时，selectedValue会更新，同时也会更新config.js中的selectedValue字段