mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-06-30 22:17:58 -04:00
daniel-dx
219 lines
5.5 KiB
JavaScript
Executable File
219 lines
5.5 KiB
JavaScript
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>array-tables widget</title>
|
|
|
|
<link rel="stylesheet" href="../demo.css">
|
|
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--演示区域-->
|
|
<div id="demo" v-cloak>
|
|
<div v-for="(item, idx) in formSchemas">
|
|
<h4 class="demo_title">{{item.title}}</h4>
|
|
<div class="demo_item-wrapper">
|
|
<div>
|
|
<ncform :form-schema="item.schema" v-model="item.schema.value"></ncform>
|
|
<small>value: {{item.schema.value}}</small>
|
|
</div>
|
|
<div>
|
|
<pre>{{JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)}}</pre>
|
|
</div>
|
|
<div>
|
|
<pre>{{item.detail}}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/vue/dist/vue.min.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/@ncform/ncform/dist/vueNcform.js"></script>
|
|
<script type="text/javascript" src="../../dist/input.js"></script>
|
|
<script type="text/javascript" src="../../dist/object.js"></script>
|
|
<script type="text/javascript" src="../../dist/arrayTable.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
Vue.use(vueNcform, { extComponents: { input: input.default, object: object.default, arrayTable: arrayTable.default } });
|
|
|
|
let formSchemas = [
|
|
{
|
|
title: '默认状态',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] disableAdd: 是否禁止添加项',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string',
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
disableAdd: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] disableDel: 是否禁止删除项',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
disableDel: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] disableReorder: 是否禁止排序',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
disableReorder: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] collapsed: 是否默认折叠',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
collapsed: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] disableCollapse: 是否禁止折叠',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
disableCollapse: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] addTxt: 增加按钮的显示文字。默认值Add',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
addTxt: '增加'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '[属性] delAllTxt: 删除全部按钮的显示文字。默认值Del All',
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'array',
|
|
items: {
|
|
type: 'string'
|
|
},
|
|
ui: {
|
|
widget: 'array-table',
|
|
widgetConfig: {
|
|
delAllTxt: '删除全部'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
]
|
|
|
|
// Bootstrap the app
|
|
new Vue({
|
|
el: '#demo',
|
|
data: {
|
|
formSchemas: _.cloneDeep(formSchemas),
|
|
originFormSchemas: formSchemas
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|