1、点击全选,则选择全部选项框,再点击一下全选,则不选任何选项框,先放一张实现图,如下所示。
2、Element UI下的el-table构建表格,属于html表现层部分,其代码如下所示:
<template>
<div>
<el-table ref="multipleTable" :data="tableData" border style="width: 80%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="120px" align="center"></el-table-column>
<el-table-column prop="gsbm" label="公司编码" align="center" ></el-table-column>
<el-table-column prop="gsm" label="公司名" align="center"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="SelectAll(tableData)"
class="el-button el-button--primary el-button--mini"
>全 选</el-button>
<el-button
@click="AddShowDialog = false"
class="el-button el-button--primary el-button--mini"
>取 消</el-button>
<el-button
type="primary"
@click="AddGs()"
class="el-button el-button--primary el-button--mini"
>确 定</el-button>
</div>
<div>
</template>
3、js部分,进行数据及方法的处理,代码如下所示:
<script>
export default {
data() {
return {
tableData: [
{gsbm:"QP",gsm:"阿里巴巴"},
{gsbm:"QK",gsm:"腾讯"},
{gsbm:"QG",gsm:"华为"},
{gsbm:"QF",gsm:"小米"},
{gsbm:"QP",gsm:"中国银行"},
],//批量数据
multipleSelection: [],//批量多选
}
},
methods:{
//多选后数据变化
handleSelectionChange(val){
console.log("val ::::"+JSON.stringify(val));
this.multipleSelection = val;
},
//全选按钮
SelectAll(rows){
console.log("rows : "+JSON.stringify(rows));
if(rows){
rows.forEach(row =>{
this.$refs.multipleTable.toggleRowSelection(row);
});
}else{
this.$refs.multipleTable.clearSelection();//清除全选
}
},
}
}
</script>
以上代码可以简单实现全选和反选的功能,都放在全选这一个按钮上了,如果有需要,大家可以将代码拆分一下,分别用全选和反选来做,也可以。
路漫漫其修远兮,吾将上下而求索,希望此篇文章对大家有所帮助,但使用el-table方式来构建表格存在一些问题,当数据比较多时,没有右侧的滚动条和底部的滚动条,鉴于此,可以参考另一篇文章,ag-grid来实现全选和反选。