vue elementui复合型输入框使用render函数封装组件不生效?

elementui复合型输入框:
image.png
原生代码:

<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',
    },

然而在页面上不生效,还是只显示一个输入框,求教大佬指点,怎么写就对了!

阅读 624
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题