ElementUI表格组件之复选框使用总结
因最近在项目授课过程中使用到Vue的ElementUI组件库，但是ElementUI 的Table组件中复选框的使用组件库中没有说明，所以记录此篇笔记，奉献给那些在项目中可能要使用该功能的猿猿们。
主要介绍两种使用方式：1.多选、全选、禁止选中效果 2.单选、禁止多选效果
因考虑可能使用动态数据问题，所以没有单独只写html,而是创建了web工程，方便以后进行动态数据测试。
首先，创建maven web工程，pom.xml文件中不需要导入jar包，只需配置tomcat插件即可，如下图：
<ignore_js_op>
第二步：创建js，css资源文件夹并导入Vue,ElementUI资源
<ignore_js_op>
第三步：创建页面demo1.html(table表格中全选-禁止选中效果),demo2.html(table表格单选高亮效果-禁止多选)
demo.html代码：
[HTML]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
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
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>table表格中多选、全选、禁止选中效果</
title
>
<
link
rel
=
"stylesheet"
href
=
"/css/elementui.css"
/>
</
head
>
<
body
>
<
div
id
=
"app"
>
<
el-table
ref
=
"multipleTable"
@
selection-change
=
"handleSelectionChange"
:data
=
"tableData"
border
style
=
"width: 100%"
>
<
el-table-column
type
=
"selection"
width
=
"55"
align
=
"center"
:selectable
=
'checkbox_callback'
>
</
el-table-column
>
<
el-table-column
prop
=
"date"
label
=
"日期"
width
=
"180"
>
</
el-table-column
>
<
el-table-column
prop
=
"name"
label
=
"姓名"
width
=
"180"
>
</
el-table-column
>
<
el-table-column
prop
=
"address"
label
=
"地址"
>
</
el-table-column
>
</
el-table
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"/js/vue.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/elementui.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/axios.js"
></
script
>
<
script
>
new Vue({
el:"#app",
data:{
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
status:'0'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
status:'0'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
methods:{
/**
* 复选框是否可被勾选的方法
* @param row 选中的行数据
* @param index 选中行的索引
* @returns true：可以勾选 false:不可勾选
*/
checkbox_callback:function(row,index){//初始化加载数据时，如果数据中包含status属性，并且status为'1'则该行不能被选中
if (row.status == 1) {
return false
}else{
return true
}
},
/**
*
* @param rows 选中行的集合
*/
handleSelectionChange:function(rows) {//rows为选中行的数据的集合
//勾选后，需要往后台传递什么数据，从rows中获取即可
let selectRows = JSON.stringify(rows);
alert(selectRows);
}
}
});
</
script
>
</
body
>
</
html
>
|
demo2.html代码：
[HTML]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
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
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>table表格单选效果-禁止多选</
title
>
<
link
rel
=
"stylesheet"
href
=
"/css/elementui.css"
/>
</
head
>
<
body
>
<
div
id
=
"app"
>
<
el-table
ref
=
"multipleTable"
@
select-all
=
"dialogCheck"
@
select
=
"dialogCheck"
@
selection-change
=
"dialogCheckChange"
:data
=
"tableData"
border
style
=
"width: 100%"
>
<
el-table-column
type
=
"selection"
width
=
"55"
>
</
el-table-column
>
<
el-table-column
prop
=
"date"
label
=
"日期"
width
=
"180"
>
</
el-table-column
>
<
el-table-column
prop
=
"name"
label
=
"姓名"
width
=
"180"
>
</
el-table-column
>
<
el-table-column
prop
=
"address"
label
=
"地址"
>
</
el-table-column
>
</
el-table
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"/js/vue.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/elementui.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/axios.js"
></
script
>
<
script
>
new Vue({
el:"#app",
data:{
selectioned:{},
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
status:'0'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
status:'0'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
methods:{
/**
* 单选操作，全选按钮失效方法
* @param selection
* @param row
*/
dialogCheck: function(selection, row) {
this.$refs.multipleTable.clearSelection();//取消选中
if (selection.length === 0) { // 判断selection是否有值存在，如果不存在，直接
return
}
if (row) {//设置当前勾选的行为默认选中行
this.selectioned = row;
this.$refs.multipleTable.toggleRowSelection(row, true);
}
},
/**
* 取消单选的checkbox
* @param row
*/
dialogCheckChange(row) {
if (row.length === 0) {
this.selectioned = null
}
}
}
});
</
script
>
</
body
>
</
html
>
|
总结：
因该技术点比较简单，具体的描述信息代码中都已经写好注释，故不再赘述。在这给大家分享一下学习心得，说一下学习过程中做笔记的重要性：学习过程中难免遇到不会的内容，不会的内容是研究会了就可以了吗？哪怕你当时会用了，过了一年，两年呢？当你再次用到的时候你确认自己还能记得很清楚吗？因吃过这方面的亏，所以认识到笔记的重要性。所以建议在学习过程中，每当我们攻克一个技术难点，我们都可以写一个小demo，并且做好详细笔记，把demo资源留作备份，以后其他项目用到，或者成为了老员工以后带新人的时候，项目中再使用到这些东西，把资料给他，既可以提高项目的开发效率，也可以给自己节省时间。（不足之处敬请指正！）
更多免费技术资料可关注：annalin1203