jn_manager/src/views/vab/codeGenerator/components/TableEditor.vue

<template>
  <div>
    <div slot="header" class="clearfix" style="margin-bottom: 15px">
      <el-button type="primary" @click="prettierJSON">生成表格</el-button>
    </div>
    <json-editor v-model="value" @change="prettierNewJSON" />
  </div>
</template>

<script>
  import JsonEditor from "@/components/JsonEditor/index";

  const jsonData =
    '{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';

  export default {
    components: { JsonEditor },
    data() {
      return {
        value: JSON.parse(jsonData),
      };
    },
    computed: {},
    created() {
      this.prettierJSON();
    },

    methods: {
      prettierJSON() {
        this.$emit("change", jsonData);
      },
      prettierNewJSON(jsonData) {
        this.$emit("change", jsonData);
      },
    },
  };
</script>