关于使用CDN方式使用iview建立表格时的注意点

最新推荐文章于 2024-05-30 11:27:58 发布

曦和

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量306

点赞数 1

分类专栏：前端文章标签： vue.js cdn

本文链接：https://blog.csdn.net/zcwdsada/article/details/112299229

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何使用cdn的方式使用iview

    <!-- 引入Vue -->
    <script src="//v1.vuejs.org/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- 引入组件库 -->
    <script src="//unpkg.com/iview@1.0.1/dist/iview.min.js"></script>

引用表格时注意点

使用cdn方式时，是不会区分大小写的，会使用驼峰命名的方式引用，使用表格时不可以按照传统的方法引用，如：

 <Table border :columns="columns1" :data="data1"></Table>

而应该使用下面这种方式：

<i-table border :columns="columns1" :data="data1"></i-table>

下面是完整的表格代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue -->
    <script src="//v1.vuejs.org/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- 引入组件库 -->
    <script src="//unpkg.com/iview@1.0.1/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <i-table border :columns="columns1" :data="data1"></i-table>
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            columns1: [
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age',

                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            data1: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                }
            ]

        }
    })
</script>
</body>
</html>

曦和

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于使用CDN方式使用iview建立表格时的注意点

如何使用cdn的方式使用iview  <script src="//v1.vuejs.org/js/vue.min.js"></script>  <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">  <script
复制链接

扫一扫