ElementUI表格组件之复选框使用总结
因最近在项目授课过程中使用到Vue的ElementUI组件库，但是ElementUI 的Table组件中复选框的使用组件库中没有说明，所以记录此篇笔记，奉献给那些在项目中可能要使用该功能的猿猿们。
主要介绍两种使用方式：1.多选、全选、禁止选中效果 2.单选、禁止多选效果
因考虑可能使用动态数据问题，所以没有单独只写html,而是创建了web工程，方便以后进行动态数据测试。
首先，创建maven web工程，pom.xml文件中不需要导入jar包，只需配置tomcat插件即可，如下图：
第二步：创建js，css资源文件夹并导入Vue,ElementUI资源
第三步：创建页面demo1.html(table表格中全选-禁止选中效果),demo2.html(table表格单选高亮效果-禁止多选)
demo.html代码：
<!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代码：
<!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资源留作备份，以后其他项目用到，或者成为了老员工以后带新人的时候，项目中再使用到这些东西，把资料给他，既可以提高项目的开发效率，也可以给自己节省时间。（不足之处敬请指正！）
elementui-table-checkbox.zip
(346.16 KB, 下载次数: 100)
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |