vue elementui复合型输入框使用render函数封装组件不生效？
elementui复合型输入框:
原生代码：
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select"> <el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
</el-input>
现在我用vue的render函数进行封装如下：
<script>import i18n from '../../i18n/i18n'
export default {
name: 'Dynamic',
functional: true,
props: {
prop: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
type: {
type: String,
default: 'input',
},
options: {
type: Array,
default: () => [],
},
cascaderOptions: {
type: Array,
default: () => [],
},
props: {
type: Object,
default: () => {},
},
},
render: (
h,
{
props: { prop, type, label, options, props },
data,
listeners: { change = () => {} },
}
) => {
// console.log('props', JSON.stringify(props))
const children = {
input: (createElement) =>
createElement('el-input', {
props: {
...{
type: 'input',
clearable: true,
},
...props,
},
...data,
on: {
change(v) {
change(v)
},
},
}),
compositeInput: (createElement) =>
createElement('el-input', {
props: {
...{
type: 'input',
clearable: true,
},
...props,
},
...data,
on: {
change(v) {
change(v)
},
},
},
[
createElement(
'el-select',
{
props: {
...{
type: 'select',
filterable: true,
clearable: true,
},
...props,
},
...data,
on: {
change: (v) => {
change(v)
},
},
},
[
options
? options.map((it, index) => {
return createElement('el-option', {
props: {
label: it.label,
key: (it.value || it.id) + index,
value:
props && props.type === 'number'
? Number(it.value || it.id)
: it.value || it.id,
},
})
})
: '',
]
)
]),
select: (createElement) =>
createElement(
'el-select',
{
props: {
...{
type: 'select',
filterable: true,
clearable: true,
},
...props,
},
...data,
on: {
change: (v) => {
change(v)
},
},
},
[
options
? options.map((it, index) => {
return createElement('el-option', {
props: {
label: it.label,
key: (it.value || it.id) + index,
value:
props && props.type === 'number'
? Number(it.value || it.id)
: it.value || it.id,
},
})
})
: '',
]
),
opt: () => '',
}
return h(
'el-form-item',
{
props: {
prop,
label,
},
},
[children[type](h)]
)
},
}
</script>
复合型输入框代码：
compositeInput: (createElement) => createElement('el-input', {
props: {
...{
type: 'input',
clearable: true,
},
...props,
},
...data,
on: {
change(v) {
change(v)
},
},
},
[
createElement(
'el-select',
{
props: {
...{
type: 'select',
filterable: true,
clearable: true,
},
...props,
},
...data,
on: {
change: (v) => {
change(v)
},
},
},
[
options
? options.map((it, index) => {
return createElement('el-option', {
props: {
label: it.label,
key: (it.value || it.id) + index,
value:
props && props.type === 'number'
? Number(it.value || it.id)
: it.value || it.id,
},
})
})
: '',
]
)
]),
然后在js文件中配置：
{ type: 'compositeInput',
prop: 'ticket_id',
label: 'text_workorder_number',
value: '',
options: null,
requireData: true,
requireApiPath: 'addons/list?addons=14',
},
然而在页面上不生效，还是只显示一个输入框，求教大佬指点，怎么写就对了！
以上是 vue elementui复合型输入框使用render函数封装组件不生效？ 的全部内容， 来源链接： utcz.com/p/935061.html
