simple-frame-unit/src/components/ed-base-vue/package/OptionSlot.js

基于vue2 研发的与simple-data后端配合使用的组件

// 用于处理option插槽
export default {
  name: 'EdOptionSlot',
  props: {
    // 组件类型
    tags: {
      type: String,
      required: true
    },

    // option 的相关属性
    optionAttrs: Object,

    // 数据
    data: {
      type: [Object, String],
      required: true
    },

    // 子元素
    child: {
      type: String,
    }
  },
  data() {
    return {
      optionTypes: {
        'el-select': {
          type: 'el-option',
          value: 'value'
        },
        'el-checkbox-group': {
          type: 'el-checkbox',
          value: 'label'
        },
        'el-radio-group': {
          type: 'el-radio',
          value: 'label'
        }
      }
    }
  },
  render(h) {
    let optionType = this.child ? this.child : this.optionTypes[this.tags].type
    const config = this.getOptionConfig(this.optionAttrs, optionType, this.data)
    return h(optionType, config.attrs, config.children)
  },
  methods: {
    // 获取配置
    getOptionConfig(customAttrs, type, data) {
      let options = {}

      if (type !== 'el-option') {
        options.label = data.value
        options.value = data.label
        options = Object.assign({}, data, options)
      } else {
        options = data
      }
      const attrs = Object.assign({}, customAttrs, options)
      let children = type !== 'el-option' ? data.label : null
      return {attrs: {attrs}, children: children}
    },
  }
}