Overview
DevExtreme HTML5 JavaScript Form is a Vue component for data editing that provides a customizable layout for arranging editors in columns, groups, and tabs. Best suitable editors are chosen automatically depending on the data type. You can use Vue syntax and techniques to instantiate and configure the Form or handle its events. In addition, the component supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components on GitHub.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<dx-form :form-data="formData">
<div
slot="avatar-template"
slot-scope="_"
>
<div class="form-avatar"/>
</div>
<dx-group-item
:col-count="4"
css-class="first-group"
>
<dx-simple-item template="avatar-template"/>
<dx-group-item :col-span="3">
<dx-simple-item data-field="FirstName"/>
<dx-simple-item data-field="LastName"/>
<dx-simple-item
:editor-options="birthDateOptions"
data-field="BirthDate"
editor-type="dxDateBox"
/>
</dx-group-item>
</dx-group-item>
<dx-group-item
:col-count="2"
css-class="second-group"
>
<dx-group-item>
<dx-simple-item data-field="Address"/>
<dx-simple-item data-field="City"/>
<dx-simple-item
:editor-options="positionOptions"
data-field="Position"
editor-type="dxSelectBox"
/>
</dx-group-item>
<dx-group-item>
<dx-simple-item
:editor-options="stateOptions"
data-field="State"
editor-type="dxSelectBox"
/>
<dx-simple-item data-field="ZipCode"/>
<dx-simple-item
:editor-options="phoneOptions"
data-field="Mobile"
>
<dx-label text="Phone"/>
</dx-simple-item>
</dx-group-item>
<dx-simple-item
:col-span="2"
:editor-options="notesOptions"
data-field="Notes"
editor-type="dxTextArea"
/>
</dx-group-item>
</dx-form>
</template>
<script>
import {
DxForm,
DxSimpleItem,
DxGroupItem,
DxLabel
} from 'devextreme-vue/form';
import { DxTextArea } from 'devextreme-vue/text-area';
import { employee, positions, states } from './data.js';
export default {
components: {
DxForm,
DxTextArea,
DxGroupItem,
DxSimpleItem,
DxLabel
},
data: function() {
return {
formData: employee,
birthDateOptions: { width: '100%' },
positionOptions: {
items: positions,
value: ''
},
stateOptions: {
items: states
},
phoneOptions: { mask: '+1 (000) 000-0000' },
notesOptions: { height: 140 }
};
}
};
</script>
<style>
.first-group,
.second-group {
padding: 20px;
}
.second-group {
background-color: rgba(191, 191, 191, 0.15);
}
.form-avatar {
height: 128px;
width: 128px;
margin-right: 10px;
border: 1px solid #d2d3d5;
border-radius: 50%;
background-image: url("../../../../images/petersmith.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
<span v-if="false">Loading...</span>
</div>
</div>
</body>
</html>
export const employee = {
'ID': 1,
'FirstName': 'John',
'LastName': 'Heart',
'Position': 'CEO',
'BirthDate': '1964/03/16',
'HireDate': '1995/01/15',
'Notes': 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
'Address': '351 S Hill St.',
'City': 'Los Angeles',
'State': 'CA',
'ZipCode': '90013',
'Home': '555-684-1334',
'Mobile': '555-684-1335',
'Email': 'jheart@dx-email.com',
'Skype': 'jheart_DX_skype',
};
export const positions = [
'HR Manager',
'IT Manager',
'Controller',
'CEO',
'Sales Manager',
'Support Manager',
'Shipping Manager'
];
export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-vue': 'npm:devextreme-vue@19.1',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': { loader: 'vue-loader' }
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});