上一章：Vue实现自动化平台（四）--接口管理页面的实现_做测试的喵酱的博客-CSDN博客

一、编辑用例页面样式展示

编辑用例页面，样式展示来源于postman的样式。

二、整体代码

三、知识点

3.1 表单格栅布局

来源：element UI 组件。Layout 布局：Element - The world's most popular Vue UI framework

格栅布局：将一行分成很多块。

3.2 选项卡的实现

来源：element UI 组件，Tabs标签页 Element - The world's most popular Vue UI framework

3.3 动态增加输入框

监听器的应用

3.4 json格式数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'components: {jsonView,}

3、使用组件

<json-view :data="editData" style="height: 420px;overflow-y: scroll" />

3.5 json数据编辑器

实现在页面上编写json格式的数据，对格式进行校验。

1、安装依赖

nmp install vue2-ace-editor

github地址： https://github.com/chairuosen/vue2-ace-editor

2、导入依赖，注册为子组件

import Editor from 'vue2-ace-editor'

// 在页面组件中通过components,注册导入的组件

3.6 输入框的实现

Element - The world's most popular Vue UI framework