报错：
vue创建table页面时，报错：
<a-table> did you register the component correctly?
解决：
ant-design-vue未安装，或者是未引入
安装命令：
npm i –save ant-design-vue@1.7.8
这样就没有再报错，后面就很顺利了。
vue项目引入
1.在main.js文件中引用
import Antd from ‘ant-design-vue’;
import ‘ant-design-vue/dist/antd.css’;
Vue.use(Antd);
2.vue模版代码
AtableTest.vue
<template>
<div class="home">
<div class="title">这是一个{{ msg }}页面</div>
<a-table :columns="columns" :data-source="data">
<a slot="name" slot-scope="text">{{ text }}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags">
<a-tag
v-for="tag in tags"
:key="tag"
:color="
tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
<span slot="action" slot-scope="text, record">
<a @click="getData(record)">Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
</span>
</a-table>
</div>
</template>
<script>
const columns = [
{
dataIndex: 'name',
key: 'name',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
scopedSlots: { customRender: 'tags' },
},
{
title: 'Action',
key: 'action',
scopedSlots: { customRender: 'action' },
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default {
name: "AtableTest",
data() {
return {
data,
columns,
msg: "data-home",
};
},
methods:{
getData:function(record){
console.log(record)
}
}
};
</script>
<style lang="less">
.home {
// background-color: aqua;
.title {
font-size: 40px;
letter-spacing: 2px;
}
}
</style>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/101555.html
