TableEditor.vue 973 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <div>
  3. <div slot="header" class="clearfix" style="margin-bottom: 15px">
  4. <el-button type="primary" @click="prettierJSON">生成表格</el-button>
  5. </div>
  6. <json-editor v-model="value" @change="prettierNewJSON" />
  7. </div>
  8. </template>
  9. <script>
  10. import JsonEditor from "@/components/JsonEditor/index";
  11. const jsonData =
  12. '{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
  13. export default {
  14. components: { JsonEditor },
  15. data() {
  16. return {
  17. value: JSON.parse(jsonData),
  18. };
  19. },
  20. computed: {},
  21. created() {
  22. this.prettierJSON();
  23. },
  24. methods: {
  25. prettierJSON() {
  26. this.$emit("change", jsonData);
  27. },
  28. prettierNewJSON(jsonData) {
  29. this.$emit("change", jsonData);
  30. },
  31. },
  32. };
  33. </script>