ElementUI表格组件之复选框使用总结
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
