怎样在iview的Table表格中渲染自定义组件？

Question

我使用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> ？

Answer 1

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

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

Answer 2

render: (h) => {
    return h(TimeClock);
}

Answer 3

上午自己看了下，这里其实你还是没有注册， 因为你的父组件在初始化的时候render子组件TimeClock，此时TimeClock并没有注册， components还没起作用，因此你必须要在父组件创建之前就把TimeClock注册，我找了两种方式，一种在main.js中Vue.component('TimeClock', TimeClock),第二种是利用组件生命周期，在父组件beforeCreate中注册。

Answer 4

h(TimeClock,……的写法是错的，因为渲染时大小写不能被准确识别。你要用h(time-clock,……的写法

Answer 5

h('TimeClock'..。'TimeClock'：html中没有这个标签，直接TimeClock就行，另外想问下TimeClock怎样向父组件传值