iview上手安装引入使用

雨点打透心脏的1/2处 2023-06-27 11:19 6阅读 0赞

## 一、安装 ##

npm install iview -S

## 二、main.js中引入 ##

import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    Vue.use(iView)

## 三、使用 ##

<template>
        <Table :columns="columns1" :data="data1"></Table>
    </template>
    <script>
        export default { 
            data () { 
                return { 
                    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>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106144020189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70