携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
文章简介
本篇文章，vue中使用element的el-table组件，来实现el-table的全部选择和清空，并修改其选择状态。
功能展示
如图，点击全部选择按钮，获取到所有的数据，并给每条数据添加了一个选中状态。
功能逐步实现
第一步创建一个项目和写一个多选框的表格
参考我的另一篇文章vue项目的创建和vue中引入element-ui或element-plus
参考我的另一篇文章vue中使用element ,表格（el-table）分页选择的实现
第二步 先增加两个按钮，一个全部选择一个清空
<div>
<el-button
type="primary"
@click="resetDataOriginDialog"
class="dialogButtonCancel"
>清空
</el-button>
<el-button
type="primary"
@click="assertDataOriginDialog()"
class="dialogButtonAssert"
>全部选择
</el-button>
</div>
复制代码第三步 全选 主要的实现方法
第四步 清空 主要的实现方法
项目的完整代码
<template>
<div class="page">
<div>
<div>
<el-button
type="primary"
@click="resetDataOriginDialog"
class="dialogButtonCancel"
>清空
</el-button>
<el-button
type="primary"
@click="assertDataOriginDialog()"
class="dialogButtonAssert"
>全部选择
</el-button>
</div>
<el-table
:data="tableData"
:row-key="getRowKeys"
ref="multipleTable"
@selection-change="selectionChange"
style="width: 100%"
>
<!-- 表格增加多选框 -->
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
></el-table-column>
<el-table-column prop="dataName" width="350" label="名称">
</el-table-column>
<el-table-column
prop="updateTime"
label="时间"
></el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<el-tag disable-transitions
>{{ scope.row.describes }}
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div style="margin-top: 10px">
<el-pagination
background
class="pageRegion"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20]"
:page-size="pageSize"
layout="total, jumper, sizes,prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 数据导入表格
tableData: [],
// 选中的数组集合
multipleArray: [],
// 分页
currentPage: 1,
pageSize: 10,
total: 0
}
},
mounted() {
this.getDataList()
},
methods: {
// 源数据表格确定事件
assertDataOriginDialog() {
this.getAllDataList()
},
// 获取所有的源数据表格列表信息
getAllDataList() {
// 这个我用的还是分页的接口,你也可以重新让后端再给你写一个获取全部数据的接口
this.$api.origin
.getDataList({
page: 0,
size: 100000,
userId: window.sessionStorage.getItem("userId")
})
.then(res => {
if (res.code === 0) {
let table = res.result.data.content
// 在全选状态前需要清空选中的状态
this.$refs.multipleTable.clearSelection()
this.multipleArray = []
// 给每个多选框添加选中状态
table.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(
row,
true
)
})
this.$message.success(
`上传文件数量为${this.multipleArray.length}`
)
//重要
this.getDataList()
} else {
this.$message.error(`全选源数据失败！`)
}
})
},
// 清空数据表格的所有选中
resetDataOriginDialog() {
this.$refs.multipleTable.clearSelection()
this.multipleArray = []
},
// 获取分页数据表格列表信息
getDataList() {
this.$api.origin
.getDataList({
page: this.currentPage - 1,
size: this.pageSize,
userId: window.sessionStorage.getItem("userId")
})
.then(res => {
if (res.code === 0) {
this.total = res.result.count
this.tableData = res.result.data.content
}
})
},
// 多选框改变触发的方法
selectionChange(selection) {
this.multipleArray = selection
// this.$message.success(`选中文件数量为${this.multipleArray.length}`)
// console.log(this.multipleArray)
},
// 分页 单页数量改变事件
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getDataList()
},
// 分页 切换分页事件
handleCurrentChange(val) {
this.currentPage = val
this.getDataList()
},
// 数组中每个对象的id,因为id居右唯一性
getRowKeys(row) {
return row.id
}
}
}
</script>
<style scoped></style>
复制代码