el-form表单中使用 vue-json-editor
时间: 2023-08-30 17:05:24 浏览: 180
在 `el-form` 表单中使用 `vue-json-editor` 可以通过以下步骤实现:
1. 安装 `vue-json-editor`:
```bash
npm install vue-json-editor --save
```
2. 在需要使用的组件中引入 `vue-json-editor`:
```html
<template>
<div>
<el-form :model="form" label-width="100px">
<el-form-item label="JSON">
<vue-json-editor v-model="form.json"></vue-json-editor>
</el-form-item>
</el-form>
</div>
</template>
<script>
import VueJsonEditor from "vue-json-editor";
export default {
components: {
VueJsonEditor,
},
data() {
return {
form: {
json: {},
},
};
},
};
</script>
```
3. 在 `el-form` 表单中使用 `vue-json-editor` 的时候,需要注意以下几点:
- `vue-json-editor` 组件需要绑定一个 `v-model`,用于双向数据绑定;
- `vue-json-editor` 组件的值是一个对象,如果需要传递一个空对象,可以使用 `{}`;
- `vue-json-editor` 组件需要引入到组件中。
以上就是在 `el-form` 表单中使用 `vue-json-editor` 的步骤。
阅读全文