index.vue

<template>
  <div
    class="hsInputBox"
    :id='elId'
  >
    <div class="inputCurr">
      <el-checkbox-group v-model="value_inner">
        <el-checkbox
          v-for="(item) in dataList"
          :key='item.label'
          :label='item.label'
          :disabled='item.disabled'
        >
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <jsoneditor
      v-model='jsoneditorVisible'
      :elInfo='elInfo'
      :layout='layout'
      :jsoneditorCloseAfter='jsoneditorCloseAfter'
      :jsoneditorOpenAfter='jsoneditorOpenAfter'
    >
    </jsoneditor>
  </div>
</template>
<script>
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
import _ from "lodash";
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: "hsCheckboxGroup",
  props: {
    allSourceData: {
      type: Object,
      default() {
        return {};
      }
    },
    elInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    value: "",
    layout: {},
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config, sourceData } = newVal;
        this.initConfigData(config, sourceData);
      },
      deep: true
    },
    value(val) {
      this.initValue()
    },
    value_inner(val) {
      let value_ = [];
      if (typeof val === "string") {
        value_ = val.join();
      } else {
        value_ = val;
      }
      this.$emit("input", value_);
    }
  },
  data() {
    return {
      elId: "",
      value_inner: [],
      jsoneditorVisible: false,
      configData: {
        title: ""
      },
      dataList: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initValue()
      const { config, sourceData } = this.allSourceData;
      this.initConfigData(config, sourceData);
    });
  },
  methods: {
    initValue(){
     if (typeof this.value === "string") {
        this.value_inner = this.value.split(",");
      } else {
        this.value_inner = this.value;
      }
    },
    initConfigData(config, sourceData) {
      this.initConfig(_.cloneDeep(config));
      this.initData(_.cloneDeep(sourceData));
    },
    initConfig(config = {}) {
      this.configData = Object.assign(this.configData, config);
    },
    initData(list = []) {
      this.dataList = list;
    }
  }
};
</script>
<style scoped>
.hsInputBox {
  padding: 1px;
  width: 100%;
  height: 100%;
  display: flex;
}

.inputCurr {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>