iView怎么用?

JavaScript010

iView怎么用?,第1张

我正在使用iview, 首先保证系统有node.js, 可以支持npm安装,然后按照下面的简单步骤进行:

npm install iview --save

这样在你的package.json可以看到:

"dependencies": {

"axios": "^0.16.2",

"iview": "^2.0.0-rc.13",

在你的main.js这种文件里面(也就是你的工程里面new Vue的那个文件),加入下面代码:

import iView from 'iview'

Vue.use(iView)

然后在自己新加的component 里面,你就可以直接使用iview的控件了,例如<Table>,很方便也很美观。

最后推荐你研究下iview-admin这个,如果是做一个简单的网站,比如cms管理,你可以直接下载他们的工程,参考他们的代码,甚至直接这个工程进行修改。

有一项目中有将表格内容导出到Excel表格的需求,ivew中table中有exportCsv方法可以直接使用(下图从官网组件API文档中截取),但导出来是.csv后缀名的文件,虽然表现出来也差不多,但咱需求文档上明确写的需要.xls,所以做了些改动。

源码中默认导出的的是.csv文件,想要导出.xls文件,只要在源码中加一个导出.xls文件的选择项就好

更改文件:

node_modules/iview/dist/iview.js :

我这边是新增了一个exportXls方法,内容除".xls"后缀名以外和exportCsv方法一致

node_modules/iview/src/components/table/table.vue:

表现为(模拟数据):

第一行第二行的内容列一部分跑到了后面的列里,并把后面列的内容挤跑了

而我原本的数据是(模拟数据,以便理解):

原因如下红框部分 :

解决方案:

给初始数据的英文符号“,”替换成中文符号“,”

content = content.replace(/\,/g, ',');

// PROPERTIES_FILE_NAME是PROPERTIES文件前面的文件名

// Locale.ENGLISH可以换成LOCALE.CHINESE进行中英文切换

ResourceBundle bundle = ResourceBundle.getBundle(

PROPERTIES_FILE_NAME, Locale.ENGLISH)

通过bundle.getString(KEY)得到资源文件里的值