ElementUI的el-table表头的全选事件与自动清空事件

最近用到elementUI的table的单选和全选事件,其中elementUI的表头的全选事件的选中与取消,做下笔记。
官方文档如下:
这里写图片描述

我们可以设置下面这个方法,然后,在方法中处理被选中的事件。
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
批量选者就不说了,大家可以看我其他的文章,有一章专门说批量的。
废话不多说,直接上代码
html:

<el-row class="yt-row">
        <el-col  :span="24">
        <el-table
                  height="460"
                  :data="submitList"
                  @select="selectionChange"
                  v-model="check2"
                  style="width: 100%"
                  :stripe="true"
                  ref="articleTable"
                  border="false"
                  @select-all="selectAll"
                  @clearSelection="clearSelect"
                >
            <el-table-column type="selection"  width="50"></el-table-column>
            <el-table-column prop="" label="类型" width="60" align="center">
                <template scope="scope">
                     <img src="../../images/article_normal.png" title="文章">
                </template>
            </el-table-column>

全选事件:当用户手动勾选全选 Checkbox 时触发的事件:@select-all
大致思路,当点击全选的时候,我定义了一个集合,专门存放选中事件的数据的id,我将选中的id放入这个集合里,如果该id在集合中不存在,就添加,如果存在就移除。因为每次点击(单击或者是全选)都会触发,只要点击checbox就会触发。例如,第二行未选中状态,这次你点击了第二行,那就将第二行id添加,当你再次点击第二行的时候,那就是取消了,于是若该集合中有id,就移除。
js代码:

 // 全选
        selectAll:function () {
            if(app.selectedIds.length != app.pagination.total){
                for(var i in app.submitList){
                    if(app.selectedIds.indexOf(app.submitList[i].id)==-1){
                        app.selectedIds.push(app.submitList[i].id);
                    }
                }
            }else{
                app.selectedIds.splice(0,app.pagination.total);
            }
        }

这里的this.$refs.articleTable.clearSelection();方法articleTable为table引用的名字。即table里的ref=“articleTable”。这里的清空逻辑,就是我点击全选的时候,所有都为选中状态,然后我点击导出数据,将数据导出,导出后,它会自动将所有选中都清空。
js

toggleSelection:function(rows) {
            // 这里的articleTable为表格引用的名字。
            // 个人理解:如果这行代码直接写在回调函数里,那么这个this就是相当于回调函数来说的,就会报未定义的异常
            this.$refs.articleTable.clearSelection();
            var len = app.selectedIds.length;
            app.selectedIds=splice(0,len); // 移除选中的数据
        },
删除之类操作需要全选功能,方便选择 public class MainActivity extends Activity { private ListView lv; private MyAdapter mAdapter; private ArrayList list; private Button bt_selectall; // private Button bt_cancel; // private Button bt_deselectall; private int checkNum; // 记录选中的条目数量 private TextView tv_show;// 用于显示选中的条目数量 /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* 实例化各个控件 */ lv = (ListView) findViewById(R.id.lv); bt_selectall = (Button) findViewById(R.id.bt_selectall); // bt_cancel = (Button) findViewById(R.id.bt_cancelselectall); // bt_deselectall = (Button) findViewById(R.id.bt_deselectall); tv_show = (TextView) findViewById(R.id.tv); list = new ArrayList(); // 为Adapter准备数据 initDate(); // 实例化自定义的MyAdapter mAdapter = new MyAdapter(list, this); // 绑定Adapter lv.setAdapter(mAdapter); // 全选按钮的回调接口 bt_selectall.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 遍历list的长度,将MyAdapter中的map值全部设为true for (int i = 0; i < list.size(); i++) { MyAdapter.getIsSelected().put(i, true); } // 数量设为list的长度 checkNum = list.size(); // 刷新listview和TextView的显示 dataChanged(); } }); // 反选按钮的回调接口 // bt_cancel.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View v) { // // 遍历list的长度,将已选的设为未选,未选的设为已选 // for (int i = 0; i < list.siz
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值