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

posted @ 2020-05-27 09:18  幽暗森林之猪大屁  阅读(5898)  评论(0)    收藏  举报