# InputMultiple 多行展示
处理多行展示的内容
# 使用演示
默认返回原始字符串，用户输入什么就返回什么
<template>
<div class="layout-wrapper">
<h4>默认返回原始字符串，用户输入什么就返回什么</h4>
<jp-render-form :list="renderList" :formData.sync="formValues" @query="_query"></jp-render-form>
<p style="white-space: pre-wrap" v-html="formValues.name"></p>
</div>
</template>
<script>
export default {
methods: {},
data() {
return {
formValues: {
name: '',
region: '',
date: '',
resource: '',
username: '',
phone: ''
},
renderList: [
{
span: 6,
type: 'input-multiple',
label: '订单号码',
prop: 'name',
placeholder: '请输入单号',
content: '单号，多个以回车键隔开'
},
{
span: 6,
type: 'select',
label: '项目区域',
prop: 'region',
optionList: [
{
value: 'sh',
label: '上海'
},
{
value: 'bj',
label: '北京'
}
]
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
type: 'input',
label: '用户名用户名',
prop: 'username'
},
{
span: 6,
type: 'input',
label: '手机号码',
prop: 'phone'
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
type: 'input',
label: '手机号码',
prop: 'phone'
},
{
span: 6,
type: 'input',
label: '来源1',
prop: 'resource',
labelWidth: '96px'
},
{
span: 6,
type: 'input',
label: '手机号码',
prop: 'phone'
},
{
span: 6,
type: 'input',
label: '来源2',
prop: 'resource',
labelWidth: '68px'
}
]
}
},
methods: {
_query() {
console.log(this.formValues)
}
}
}
</script>
<style scoped>
.layout-wrapper {
background: #f8f8f8;
}
.tip {
font-size: 14px;
padding: 12px 12px 12px 0;
}
</style>
显示代码
# 根据指定的字符，返回接口需要的参数
- 默认多行输入绑定的值是用户输入的字符串，默认是以回车分割的字符串，如果接口需要数组，并且不是以回车符转数组，需要传入
splitFlag, 如果需要字符串，并且不是以回车隔开的，需要传入strFlag，组件内部根据这 2 个参数是否有值，来做处理
接口需要数组， 如果是以回车分割splitFlag=''空字符串， 否则根据splitFlag转数组。同时splitProp代表传给接口的字段，prop代表用户输入的字段
接口需要数组， 以splitFlag=','转数组
接口需要字符串， 以strFlag=','转字符串, strProp代表后端需要的字段
<template>
<div class="layout-wrapper">
<h4>接口需要数组， 如果是以回车分割splitFlag=''空字符串， 否则根据splitFlag转数组。同时splitProp代表传给接口的字段，prop代表用户输入的字段</h4>
<jp-render-form :list="renderList" :formData.sync="formValues" @query="_query"></jp-render-form>
<p style="white-space: pre-wrap" v-html="formValues.name"></p>
<h4>接口需要数组， 以splitFlag=','转数组</h4>
<jp-render-form :list="renderList2" :formData.sync="formValues2" @query="_query"></jp-render-form>
<p style="white-space: pre-wrap" v-html="formValues2.name"></p>
<h4>接口需要字符串， 以strFlag=','转字符串, strProp代表后端需要的字段</h4>
<jp-render-form :list="renderList3" :formData.sync="formValues3" @query="_query"></jp-render-form>
<p style="white-space: pre-wrap" v-html="formValues3.name"></p>
</div>
</template>
<script>
export default {
methods: {},
data() {
return {
formValues: {
name: '',
myName: '',
region: '',
date: '',
resource: '',
username: '',
phone: ''
},
renderList: [
{
span: 6,
type: 'input-multiple',
label: '订单号码',
prop: 'myName',
placeholder: '请输入单号',
content: '单号，多个以回车键隔开',
splitProp: 'name',
splitFlag: ''
},
{
span: 6,
type: 'select',
label: '项目区域',
prop: 'region',
optionList: [
{
value: 'sh',
label: '上海'
},
{
value: 'bj',
label: '北京'
}
]
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
slot: 'opration'
}
],
formValues2: {
name: '',
myName: '',
region: '',
date: '',
resource: '',
username: '',
phone: ''
},
renderList2: [
{
span: 6,
type: 'input-multiple',
label: '订单号码',
prop: 'myName',
placeholder: '请输入单号',
content: '单号，多个以回车键隔开',
splitProp: 'name',
splitFlag: ','
},
{
span: 6,
type: 'select',
label: '项目区域',
prop: 'region',
optionList: [
{
value: 'sh',
label: '上海'
},
{
value: 'bj',
label: '北京'
}
]
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
slot: 'opration'
}
],
formValues3: {
name: '',
myName: '',
region: '',
date: '',
resource: '',
username: '',
phone: ''
},
renderList3: [
{
span: 6,
type: 'input-multiple',
label: '订单号码',
prop: 'myName',
placeholder: '请输入单号',
content: '单号，多个以回车键隔开',
strProp: 'name',
strFlag: ','
},
{
span: 6,
type: 'select',
label: '项目区域',
prop: 'region',
optionList: [
{
value: 'sh',
label: '上海'
},
{
value: 'bj',
label: '北京'
}
]
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
slot: 'opration'
}
]
}
},
methods: {
_query() {
console.log(this.formValues)
console.log(this.formValues2)
}
}
}
</script>
<style scoped>
.layout-wrapper {
background: #f8f8f8;
}
.tip {
font-size: 14px;
padding: 12px 12px 12px 0;
}
</style>
显示代码