How to use vue-my-table

This blog describes how to use vue-my-table components.

Install

1
2
3
npm install vue-my-table or 
<script src="vueMyTable.umd.js"></script>
<link rel="stylesheet" type="text/css" href="vueMyTable.css">

Not support yarn add for now.

Use in vue project

1
2
3
4
5
6
7
8
import {vueMyTable} from 'vue-my-table'
import 'vue-my-table/lib/vueMyTable.css'
export default {
  name: 'app',
  components: {
    vueMyTable
  }
}

parameters

Object for param

Props/methods Type Default Description
columns Array Column of the table, please refer to this table
sortColumn String - Default sort column name
sortOrder String - Default sort type 'asc' or 'desc'
height Int - If set height to the table, the header will be fixed and scrollbar will be shown in body of the table.
detailRowComponentName String - component for the expand detail row
Striped Boolean false Striped table makes it easier to distinguish different rows, false by default

Object for columns

Name Type Default Description
index String - index name for the tr in table, it should be a key in json data, such as 'id'
isCheckbox Boolean false Show checkbox in the column, if it is set to true, there is no need to set value for the other parameters
isDetailRow Boolean - Show expand icon in the column, if it is set to true, there is no need to set value for the other parameters
label String - header of the column
sortable Boolean false Support sort for this column
width Int - width for this column, it is percent, not PX
callback function - if set callback for this column, the content of this column will be return value of the callback function,
and the html tag will be render in the return value, so to prevent XSS injection, make sure the html tags such as '<' and '>' have been escaped before return.
component_name String - If callback can not match your requirement, you can pass a component to the column and do anything you want in this component

How to use

Use with local data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
new Vue({
	el:"#app",
	  data:function(){
	    return {
	      param:{
	        columns:[
	          {
	            index:"id",isCheckbox:true
	          },
	          {
	            index:"id",isDetailRow:true
	          },
	          {
	            index:"name",label:"Name",sortable:true,width:30
	          },
	          {
	            index:"sender",label:"Sender",sortable:true,width:30,callback:this.formatSender
	          },
	          {
	            index:"comments",label:"comments",sortable:false,width:38,component_name:"comments"
	          }
	        ],
	        dataSet:[
	          {
	            id:1,name:"aaa",sender:"aaa@domain.com","comments":"this is a test"
	          },
	          {
	            id:2,name:"bbb",sender:"bbb@domain.com","comments":"this is a test"
	          },
	          {
	            id:4,name:"ccc",sender:"ccc@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:4,name:"ddd",sender:"ddd@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:5,name:"eee",sender:"eee@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:6,name:"fff",sender:"fff@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:7,name:"ggg",sender:"ggg@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:9,name:"hhh",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:10,name:"iii",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:11,name:"jjj",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:12,name:"kkk",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:13,name:"lll",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:14,name:"mmm",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:15,name:"nnn",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:16,name:"ooo",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:17,name:"ppp",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:18,name:"qqq",sender:"hhh@domain.com","comments":"this is a test"
	          }
	        ],
	        sortOrder:"asc",
	        sortColumn:"name",
	        height:300,
	        detailRowComponentName:"col-detail",
	        stripe:true  
	      }
	    }
	  },
	methods:{
	    reloadTable:function(){
	      this.local_param.reloadFlag = !this.local_param.reloadFlag;
	    },
	    formatSender:function(cell_value,row){
	      return '<b style="color:red;">'+cell_value+'</b>';
	    }   			
	}
});



Use with server data

Run node server.js in server folder in github
The table will be same with above local data sample.

1
node server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
new Vue({
	el:"#app",
	  data:function(){
	    return {
	      param:{
	        columns:[
	          {
	            index:"id",isCheckbox:true
	          },
	          {
	            index:"id",isDetailRow:true
	          },
	          {
	            index:"name",label:"Name",sortable:true,width:30
	          },
	          {
	            index:"sender",label:"Sender",sortable:true,width:30,callback:this.formatSender
	          },
	          {
	            index:"comments",label:"comments",sortable:false,width:38,component_name:"comments"
	          }
	        ],
	        sortOrder:"asc",
	        sortColumn:"name",
	        height:300,
	        detailRowComponentName:"col-detail",
	        stripe:true,
	        mode:"server",
	        url:"http://lcaolhost:3000" 
	      }
	    }
	  },
	methods:{
	    reloadTable:function(){
	      this.local_param.reloadFlag = !this.local_param.reloadFlag;
	    },
	    formatSender:function(cell_value,row){
	      return '<b style="color:red;">'+cell_value+'</b>';
	    }   			
	}
});

How to use vue-my-datepicker

This blog describes how to use vue-my-datepicker components.

Install

1
2
3
npm install vue-my-datepicker or 
<script src="vueMyDatepicker.umd.js"></script>
<link rel="stylesheet" type="text/css" href="vueMyDatepicker.css">

Not support yarn add for now.

Use in vue project

1
2
3
4
5
6
7
8
import {vueMyDatepicker} from 'vue-my-datepicker'
import 'vue-my-datepicker/lib/vueMyDatepicker.css'
export default {
  name: 'app',
  components: {
    vueMyDatepicker
  }
}

parameters

Props/methods Type Default Description
timeRange Int 2 The default timerange you want to selected
reloadFlag Boolean false Use to reload the components, only useful for serve mode
dataTimeLabelPosition String right The position of the custom timerange panel, can set to left
initStart String null The default start time, only used for serve mode, the format will be ISO format: "2019-09-18 16:55:12"
initEnd String null The default end time, only used for serve mode, the format will be ISO format: "2019-09-17 16:55:12"
useLocalTime Boolean true Whether use local time, if use local time,the start time and end time will be caculate within components with javascript.
Set it to false to use serve mode, then you need to get start time and end time from backend server.
locale String en_US The language of this component, support en_US/zh_CN/ja_JP
select-time-range function N/A When user change the timerange inside the component, then this function will return start time and end time to user.
change-time-range function N/A Only use for serve mode, if user change time range inside component, this function will return current timerange to user to
get start time and end time from bakend server.

How to use

1.Use local time mode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 1     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});



2.Use local time with left panel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 1,
			    dataTimeLabelPosition: 'left',

			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});



3.Use serve time mode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
new Vue({
	el:"#app_serve",
	data:function(){
		return{
			sever_param:{
				timeRange: 3,
				reloadFlag: false,
				initStart:"2019-09-16 01:43:10",
				initEnd:"2019-09-16 05:43:10",
				useLocalTime:false      
			},    				
		}
	},
	methods:{
	    serverSelectTimeRange(time_range){
	      console.log(time_range);//when use select custom timerange will trigger this function
	    },
	    changeTimeRange(time_range_value){
	      /*var _vue = this;
	      	$.get('/API/to/get/datatime/from/backend',data:{timerange:time_range_value},function(data){
		      	_vue.sever_param.initStart = data.start_time;
		        _vue.sever_param.initEnd = data.start_time;
		        _vue.reloadTimeRange();
	      	})*/

	      //this is just fake data for demo, you shound use above code to get datetime from backend server.
	      this.sever_param.timeRange = time_range_value;//update timeRange in param
	      if(time_range_value == 1){
	        this.sever_param.initStart = "2019-09-16 01:43:10";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();
	      }else if(time_range_value == 2){
	        this.sever_param.initStart = "2019-09-15 05:43:10";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();
	      }else if(time_range_value == 3){
	        this.sever_param.initStart = "2019-09-19 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }else if(time_range_value == 4){
	        this.sever_param.initStart = "2019-08-16 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }else if(time_range_value == 5){
	        this.sever_param.initStart = "2019-06-16 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }
	    },
	    reloadTimeRange(){
	    	this.sever_param.reloadFlag = !this.sever_param.reloadFlag;
	    }   			
	}
});




4.Use zh_CN locale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 2,
			    locale:"zh_CN"     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});




5.Use ja_JP locale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 4.
			    locale:"ja_JP"     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});




















如何用vue-cli 3.0 打包一个组件并发布到NPM站点

用VUE有一段时间了，但还从来没用过类似iview或者或者elementUI这样的库，一方面样式与公司的不相符，一方面公司的页面相对简单。
最主要的还是自己写组件的话可以更好的理解和学习VUE，在公司写的组件也不少了，就想着能不能自己也把这些组件发布出来，方便自己以后使用。
琢磨了半天，总算发布出去了，这里记录一下发布的过程，怕以后又忘了。

1.安装nodeJS

下载nodeJS安装包并按照提示安装，安装之后输入一下命令检查是否安装正确。

1
2
node -v
v10.16.4

2.安装vue-cli 3.0,安装之后可以输入vue –version来检查是否安装正确。

1
2
3
npm install -g @vue/cli
vue --version
3.4.1

3.利用vue create 初始化一个项目.

花的时间有点长，耐心等待，要是不想用命令行也可以用UI的方式，vue-cli 3.0居然提供了UI的方式。详情请戳这里

1
vue create hello-word

为了简单方便，命令行使用默认方式安装

安装完成之后运行

1
npm run serve

运行结束之后会看到如下的输出，这个时候就可以通过localhost:8080来访问这个项目了

项目初始化的目录结构如下，没错没有webpack.config.js,因为在vue-cli 3.0里面通过vue.config.js文件来设置webpack的相关配置，后面会讲到。

到此为止准备工作就算结束了。

4.开始构建自己的组件代码

按照惯例(我也不知道为啥大家都要这么做)，添加packages目录存放自己的组件代码，修改src目录为examples表明这个目录是用来演示组件是如何使用的，
因为我们要打包的仅仅是组件而已。
修改src目录前记得先停掉npm serve，不然文件占用无法修改。
在packages目录下添加自己的组件目录my-first-components.
在my-first-conponents目录下新建src目录，并在src目录下新建my-first-components.vue文件。
回到src目录，新建index.js文件用于export这个组件
回到packages目录下，新建index.js文件，这个文件负责export所有的组件，因为我们还可以将多个组件一起打包出来
还有重要的一点，我们修改的默认的入口文件目录从src变成了examples，所以需要新建vue.config.js文件来制定新的入口，内容如下

1
2
3
4
5
6
7
8
9
10
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

到此为止，文件准备工作结束，完整结构如下:

5.my-first-components.vue文件内容

这里我们只是写一个最基本的组件，只是输出传入的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
	<div>
		{{msg}}
	</div>
</template>
<script>
	export default{
		name:"myFirstComponents",
		props:{
			msg:String
		}
	};
</script>

6.my-first-components目录下index.js的内容

目的是export这个组件给其他地方引用

1
2
3
4
5
import myFirstComponents from './src/my-first-components.vue'
myFirstComponents.install = function (Vue) {
    Vue.component(myFirstComponents.name, myFirstComponents);
};
export default myFirstComponents

7.packages 目录下index.js的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 导入所有组件
import myFirstComponents from './my-first-components/index.js'

const components = [myFirstComponents]
const install = function(vue) {
  /* istanbul ignore if */
  if (install.installed) return;
  /*eslint-disable*/
  components.map((component) => {
    vue.component(component.name, component); //component.name 此处使用到组件vue文件中的 name 属性
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
};

export {
  install,
  myFirstComponents
}

8.在app.vue中引用这个组件.

我们注释掉之前的HelloWord组件，这样UI的输出更清晰然后引入自己的组件，传入自己的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <myFirstComponents msg="============================="></myFirstComponents>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import {myFirstComponents} from './../packages/index'

export default {
  name: 'app',
  components: {
    HelloWorld,
    myFirstComponents
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

UI上就能看到组件生效了

9.开始打包，添加lib命令

在package.json中添加如下脚本

1
2
3
"script": {
	"lib": "vue-cli-service build --target lib --name myFirstComponents --dest lib packages/index.js"
}

然后执行命令：

1
npm run lib

build之后的结果如下

10.修改package.json准备上传到NPM server

  • name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
  • version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件，该字段需指向我们最终编译后的包文件。
  • keyword：关键字，以空格分离希望用户最终搜索的词。
  • author：作者
  • private：是否私有，需要修改为 false 才能发布到 npm
  • license： 开源协议
    这里我们添加的内容如下：
    1
    2
    3
    4
    5
    6
    "name": "my-first-components",
    "version": "0.1.0",
    "private": false,
    "description": "first vue componets test",
    "main": "lib/myFirstComponents.umd.js",
    "keyword": "",

11.修改.npmignore 文件，就不需要发布的文件过滤掉

添加以下目录文件

1
2
3
4
5
examples/
packages/
public/
babel.config.js
vue.config.js

12.本地测试npm包

package.json文件修改完毕之后可以在本地执行命令npm pack，会在项目根目录生成一个my-first-components-0.1.0.tgz的压缩包
然后在另外一个项目里面安装这个包

1
npm install d:\xxx\xxx\my-first-components-0.1.0.tgz

然后在App.vue里面引用这个组件,如果显示正常就说明打包没有问题

1
2
3
4
5
6
7
8
9
import {myFirstComponents} from 'my-first-components'

export default {
  name: 'app',
  components: {
    myFirstComponents
  }
}
</script>

13.发布到NPM server

首先需要去NPM上注册一个账号，如果已有账号请忽略。
然后在组件目录下登录

1
npm login

输入用户名密码，然后执行

1
npm publish

就可以发布成功，我发布的时候遇到两个问题，第一个错误是npm ERR! 400 Bad Request - PUT https://registry.npmjs.org/myFirstComponents - “myFirstComponents” is invalid for new packages
因为开始的时候我在package.json里面写的name是myFirstComponents，看来npm name不支持这种驼峰的写法，后来换成了”name”: “my-first-components”之后就可以了。
第二个错误是npm ERR! publish Failed PUT 403 You do not have permission to publish “npmtest”. Are you logged in as the correct user?
这个原因基本都是因为你的npm包的名字被别人注册了，换一个名字就可以了
发布之后去NPM server的网站，登录之后看看自己的packages，就能够找到了。

14. 在自己的项目npm安装这个发布的组件

为了在本项目里面引用刚才发布的组件需要将package.json文件里面的name修改一下，不然会提示

1
2
3
npm ERR! Refusing to install package with name "my-first-components" under a package
npm ERR! also called "my-first-components". Did you name your project the same
npm ERR! as the dependency you're installing?

比如将name修改为”name”: “my-first-components-test”，然后执行

1
npm install my-first-components

然后在项目的App.vue里面修改引用方式

1
2
import {myFirstComponents} from './../packages/index' //以前是这样的写法，现在修改为下面的写法
import {myFirstComponents} from 'my-first-components'//新的引入方式

然后执行

1
npm run serve

如果能够正常显示，说明组件发布成功啦。