mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-22 06:45:23 -04:00
xiaow
122 lines
3.8 KiB
HTML
122 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
|
|
<title>select widget</title>
|
|
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--演示区域-->
|
|
<div id="demo" v-cloak>
|
|
<ncform :form-schema="formSchema" v-model="model"></ncform>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/mockjs"></script>
|
|
<script src="https://unpkg.com/js-url"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/element-ui"></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/select.js"></script>
|
|
<script type="text/javascript" src="../../dist/object.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
Mock.mock(/getMoney/, function(options) {
|
|
let params = url('?', options.url) || {};
|
|
let result = [{ id: 1, name: '1 yuan' }, { id: 2, name: '2 yuan' }];
|
|
console.log('>>>>> getMoney')
|
|
return result.filter(item => !params.keyword || item.name.indexOf(params.keyword) >= 0);
|
|
});
|
|
|
|
Vue.use(vueNcform, { extComponents: { object: object.default, select: select.default } });
|
|
|
|
// Bootstrap the app
|
|
new Vue({
|
|
el: '#demo',
|
|
data: {
|
|
formSchema: {
|
|
type: 'object',
|
|
properties: {
|
|
choice: {
|
|
type: 'number',
|
|
ui: {
|
|
widget: 'select',
|
|
widgetConfig: {
|
|
itemLabelField: "name",
|
|
itemValueField: "id",
|
|
itemTemplate: "<span>{{item.name}}</span>",
|
|
multiple: true,
|
|
filterable: true,
|
|
enumSourceRemote: {
|
|
remoteUrl: '/api/test/getMoney',
|
|
paramName: "keyword",
|
|
otherParams: {
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// formSchema: {
|
|
// "type": "object",
|
|
// "properties": {
|
|
// "province": {
|
|
// "type": "string",
|
|
// "ui": {
|
|
// "widget": "select",
|
|
// "widgetConfig": {
|
|
// "itemLabelField": "name",
|
|
// "itemValueField": "id",
|
|
// "enumSourceRemote": {
|
|
// "remoteUrl": "/api/test/getProvinces",
|
|
// "paramName": "keyword"
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
// "city": {
|
|
// "type": "string",
|
|
// "ui": {
|
|
// "widget": "select",
|
|
// "widgetConfig": {
|
|
// "itemLabelField": "name",
|
|
// "itemValueField": "id",
|
|
// "multiple": true,
|
|
// "enumSourceRemote": {
|
|
// "remoteUrl": "/api/test/getCities",
|
|
// "paramName": "keyword",
|
|
// "otherParams": {
|
|
// "provinceId": "dx: {{$root.province}}"
|
|
// },
|
|
// selectFirstItem: true
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
model: {
|
|
// province: 2,
|
|
// city: 30
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|