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

本文探讨如何在Vue项目中使用iview的Table组件时,正确导入并渲染自定义TimeClock组件。遇到Vue警告关于未注册组件的问题,作者详细解析了问题原因及解决步骤,包括确保组件导入、注册和使用方式的正确性。
摘要由CSDN通过智能技术生成

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

下面这个是TimeClock.vue文件

:

.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;

}

import Cookies from 'js-cookie'

import globals from '../config'

export default{

name: 'timeClock',

data () {

return {

msg: 'hello vue'

}

},

components: {},

props: [

'hour', 'minute'

],

mounted () {

},

methods: {}

}

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

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

}

}

c6afbec67bf49c89362c3989baa13c2d.png

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

想问下,怎样能在iview的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过在子组件表格列定义使用`scoped-slot`来自定义渲染日期选择器,然后在父组件传递一个日期选择器的`props`给子组件,在子组件使用该`props`来控制日期选择器的显示和隐藏。 以下是一个简单的示例代码: 在父组件: ``` <template> <div> <DatePicker v-model="selectedDate" /> <Table :data="tableData"> <Table-column prop="name" label="姓名" /> <Table-column prop="age" label="年龄" /> <Table-column label="生日"> <template slot-scope="{row}"> <Date-Picker v-show="row.showDatePicker" v-model="row.birthday" type="date" @on-ok="hideDatePicker(row)" /> <div v-else @click="showDatePicker(row)">{{ row.birthday }}</div> </template> </Table-column> </Table> </div> </template> <script> import { DatePicker, Table } from "iview"; export default { components: { DatePicker, Table }, data() { return { selectedDate: null, tableData: [ { name: "张三", age: 20, birthday: "1999-01-01", showDatePicker: false }, { name: "李四", age: 22, birthday: "1997-06-15", showDatePicker: false }, { name: "王五", age: 25, birthday: "1994-11-30", showDatePicker: false } ] }; }, methods: { showDatePicker(row) { row.showDatePicker = true; }, hideDatePicker(row) { row.showDatePicker = false; } } }; </script> ``` 在子组件: ``` <template> <div> <Table :data="tableData"> <Table-column prop="name" label="姓名" /> <Table-column label="生日"> <template slot-scope="{row}"> <Date-Picker v-model="row.birthday" type="date" /> </template> </Table-column> </Table> </div> </template> <script> import { DatePicker, Table } from "iview"; export default { components: { DatePicker, Table }, props: { datePickerProps: Object }, data() { return { tableData: [ { name: "张三", birthday: "1999-01-01" }, { name: "李四", birthday: "1997-06-15" }, { name: "王五", birthday: "1994-11-30" } ] }; } }; </script> ``` 在父组件使用子组件时,传递日期选择器的`props`: ``` <template> <div> <DatePicker v-model="selectedDate" /> <ChildComponent :datePickerProps="datePickerProps" /> </div> </template> <script> import ChildComponent from "./components/ChildComponent.vue"; export default { components: { ChildComponent }, data() { return { selectedDate: null, datePickerProps: { type: "date" } }; } }; </script> ``` 这样就可以在子组件表格渲染日期选择器,并且可以根据`props`来控制日期选择器的显示和隐藏了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值