new Vue({
el: '#app',
data() {
return {
startIndex: 0,
list: []
};
},
created() {
for (let i = 0; i < 10000; i++) {
this.list.push({
id: 1,
name: 'name' + i,
createTime: '2018-09-09'
})
}
},
computed: {
limitCount() {
return 300 / 40 + 2;
},
splitData() {
return this.list.slice(this.startIndex, this.startIndex + this.limitCount)
}
},
methods: {
scroll() {
// 根据滚动的距离，估算出这个滚动位置对应的数组序列，例如滚动100px，每条40px，对应第3条
let scrollTop = this.$refs.scrollDom.scrollTop;
this.startIndex = Math.floor(scrollTop / 40);
}
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue2 Example</title>
<!-- 引入 Element UI 的样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 Vue Form Generator -->
<script src="https://unpkg.com/vue-form-generator/dist/vfg.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-form-generator/dist/vfg.css">
<style>
.form-container {
display: flex;
}
.form-container > div {
flex: 1;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<script>
// 注册 Vue Form Generator 组件
Vue.component('vue-form-generator', VueFormGenerator.component);
// 自定义多选下拉框组件
Vue.component('fieldMultiSelect', {
props: ['model', 'schema', 'formOptions'],
template: `
<el-select
v-model="model[schema.model]"
multiple
placeholder="请选择"
filterable
@focus="loadCities">
<el-option
v-for="city in cities"
:key="city.value"
:label="city.label"
:value="city.value">
</el-option>
</el-select>
`,
data() {
return {
cities: []
};
},
methods: {
loadCities() {
this.cities = [
{ value: 'Beijing', label: '北京' },
{ value: 'Shanghai', label: '上海' },
{ value: 'Nanjing', label: '南京' },
{ value: 'Chengdu', label: '成都' },
{ value: 'Shenzhen', label: '深圳' },
{ value: 'Guangzhou', label: '广州' }
];
}
}
});
// 自定义单选下拉框组件
Vue.component('fieldSingleSelect', {
props: ['model', 'schema', 'formOptions'],
template: `
<el-select
v-model="model[schema.model]"
placeholder="请选择">
<el-option
v-for="region in regions"
:key="region.value"
:label="region.label"
:value="region.value">
</el-option>
</el-select>
`,
data() {
return {
regions: [
{ value: 'Shanghai', label: '中国上海' },
{ value: 'Shenzhen', label: '中国深圳' },
{ value: 'Beijing', label: '中国北京' }
]
};
}
});
// 父组件
Vue.component('parent-component', {
template: `
<div class="form-container">
<element-form :form.sync="form"></element-form>
<vue-form-generator-form :form.sync="form"></vue-form-generator-form>
</div>
`,
data() {
return {
form: {
name: '',
password: '',
age: '',
cities: [],
region: ''
}
};
}
});
// Element UI 表单子组件
Vue.component('element-form', {
props: ['form'],
template: `
<el-form :model="form" label-width="120px">
<el-form-item label="Name">
<el-input v-model="form.name" placeholder="Your name"></el-input>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password" placeholder="Minimum 6 characters"></el-input>
</el-form-item>
<el-form-item label="Age">
<el-input type="number" v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="Cities">
<el-select v-model="form.cities" multiple placeholder="请选择" filterable @focus="loadCities">
<el-option
v-for="city in cities"
:key="city.value"
:label="city.label"
:value="city.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="地区">
<el-select v-model="form.region" placeholder="请选择">
<el-option
v-for="region in regions"
:key="region.value"
:label="region.label"
:value="region.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
`,
data() {
return {
cities: [],
regions: [
{ value: 'Shanghai', label: '中国上海' },
{ value: 'Shenzhen', label: '中国深圳' },
{ value: 'Beijing', label: '中国北京' }
]
};
},
methods: {
loadCities() {
this.cities = [
{ value: 'Beijing', label: '北京' },
{ value: 'Shanghai', label: '上海' },
{ value: 'Nanjing', label: '南京' },
{ value: 'Chengdu', label: '成都' },
{ value: 'Shenzhen', label: '深圳' },
{ value: 'Guangzhou', label: '广州' }
];
}
}
});
// Vue Form Generator 表单子组件
Vue.component('vue-form-generator-form', {
props: ['form'],
template: `
<vue-form-generator :schema="schema" :model="form" :options="formOptions"></vue-form-generator>
`,
data() {
return {
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'Name',
model: 'name',
placeholder: 'Your name',
required: true
},
{
type: 'input',
inputType: 'password',
label: 'Password',
model: 'password',
min: 6,
required: true,
hint: 'Minimum 6 characters'
},
{
type: 'input',
inputType: 'number',
label: 'Age',
model: 'age',
required: true
},
{
type: 'multiSelect',
label: 'Cities',
model: 'cities',
required: true
},
{
type: 'singleSelect',
label: '地区',
model: 'region',
required: true
}
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>