0

我使用vue+ivew开发,其中一个页面需要用到iview中的表格Table,表格中需要用到我自定义的一个组件<TimeClock>,我在columns数据的项中,设置了一个函数render,render中放入了我的自定义组件<TimeClock>,我在这个页面中import了这个组件,在components中也注册了,但是页面渲染的时候报错:[Vue warn]: Unknown custom element: <TimeClock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

下面这个是TimeClock.vue文件

<template>
  <div class="time-clock">
    <Input v-model="hour" style="width: 46px"></Input>
    <span class="colon">:</span>
    <Input v-model="minute" style="width: 46px"></Input>
  </div>
</template>
<style>
  .time-clock input {
    width: 46px;
    height: 24px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    color: black;
  }

  .time-clock .colon {
    font-weight: 700;
    font-size: 12px;
  }
</style>
<script>
  import Cookies from 'js-cookie'
  import globals from '../config'
  export default{
    name: 'timeClock',
    data () {
      return {
        msg: 'hello vue'
      }
    },
    components: {},
    props: [
      'hour', 'minute'
    ],
    mounted () {
    },
    methods: {}
  }
</script>

下面是引用上面的子组件的父组件所在页面:

<template>
  <div class="edit-drug">
    <div class="edit-page-container">
      <Tabs type="card">
        <Tab-pane label="星期一">
          <Table border :columns="columns" :data="data"></Table>
        </Tab-pane>
      </Tabs>
    </div>
  </div>
</template>
<script>
  import TimeClock from '../components/TimeClock.vue'
  export default{
    data () {
      return {
        columns: [
          {
            title: '开始时间',
            key: 'startTime',
            render: (h, params) => {
              return h('div', [
                h('TimeClock', {
                  props: {
                    hour: params.row.startTime.sTimeHour,
                    minute: params.row.startTime.sTimeMinute
                  }
                })
              ]);
            }
          },
          {
            title: '结束时间',
            key: 'endTime',
            render: (h, params) => {
              return h('div', [
                h('TimeClock', {
                  props: {
                    hour: params.row.endTime.eTimeHour,
                    minute: params.row.endTime.eTimeMinute
                  }
                })
              ]);
            }
          },
          {
            title: '数量',
            key: 'num'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params)
                    }
                  }
                }, '删除')
              ]);
            }
          }],
        data: [
          {
            startTime: {
              sTimeHour: '08',
              sTimeMinute: '00'
            },
            endTime: {
              eTimeHour: '09',
              eTimeMinute: '00'
            },
            num: 10
          },
          {
            startTime: {
              sTimeHour: '09',
              sTimeMinute: '00'
            },
            endTime: {
              eTimeHour: '10',
              eTimeMinute: '00'
            },
            num: 10
          }
        ]
      }
    },
    components: {
      SubTopBar, TimeClock
    }
  }
</script>

图片描述

提示说我没有正确地注册<TimeClock>组件,但我实际上是已经import了,并且在components中注册了,在当前这个页面是可以正常显示这个TimeClock组件的。只是我想在这个页面的Table标签中渲染这个组件,提示就是我没有注册这个组件了。

想问下,怎样能在iview的<Table>中渲染我自定义的组件<TimeClock> ?

2017-06-02 提问

查看全部 5 个回答

10

这里已经是你的自定义组件(标签了,不需要用引号括起来了)

clipboard.png

 return h('div', [
    h(TimeClock, {
      props: {
        hour: params.row.startTime.sTimeHour,
        minute: params.row.startTime.sTimeMinute
      }
    })
  ]);

推广链接