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