<template>
<div>
<el-form :model="form" label-width="auto">
<el-row :gutter="24">
<el-col :span="row_w" v-for="i in form_item_arr" :key="i">
<template v-if="i.type == 'input'">
<el-form-item :label="i.label" :prop="i.prop">
<el-input v-model="form[i.prop]" type="text" clearable :placeholder="'请输入'+i.label" autocomplete="off" maxlength="10" show-word-limit />
</el-form-item>
</template>
<template v-if="i.type == 'select'">
<el-form-item :label="i.label" :prop="i.prop">
<el-select v-model="form[i.prop]" filterable remote clearable :placeholder="'请选择'+i.label" :remote-method="get_list_t" >
<el-option v-for="item in customerId_list" :key="item.key" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</template>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
form: {},
row_w: 6,
form_item_arr: [
{
type: "select",
label: "选择器",
prop: "customerId",
option_arr: "customerId_list"
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
{
type: "input",
label: "输入框",
prop: "businessNo",
},
],
customerId_list: [],
};
},
};
</script>
<style scoped>
</style>
VUE+Element Plus 实现动态渲染表单
于 2023-06-17 12:05:27 首次发布
该代码段展示了一个Vue.js组件,使用ElementUI库创建动态的表单,包括输入框(input)和选择器(select)。表单数据绑定到`form`对象,输入框具有验证、清空和长度限制功能,选择器支持远程过滤和清除选项。
摘要由CSDN通过智能技术生成