element中Table表格控件单选、多选功能进一步优化

一、代码实现

1、父组件

<template><div><!-- 用户选择嵌套弹框 --><el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="选择人员" :visible.sync="open"width="80%" append-to-body :show-close="false"><TableList :open="open" :dataList="dataList" @submitForm="submitForm" @cancel="cancel"></TableList></el-dialog></div>
</template><script>
import TableList from '@/components/table-list'
export default {name: 'TablePage5',components:{TableList,},props: {},data() {return {open:true,dataList:[ {userId: 3,userName: '王五'},],}},watch: {},methods: {// 取消cancel() {// this.open = false// .............},// 确认submitForm(checkIds) {console.log(checkIds, 'checkId获取到')// .........},}
}
</script><style></style>

2、子组件（弹框）

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"><el-form-item label="搜索" prop="search"><el-input v-model="queryParams.search" placeholder="请输入" clearable size="small" style="width: 200px"@keyup.enter.native="handleQuery" /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('queryForm')">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button></el-form-item></el-form><el-table v-loading="loading" :data="userList" max-height="400" ref="multipleTable" @select="selectRow"@select-all="selectAll" :header-cell-class-name="cellClass" :row-key="row => {return row.userId}"><!-- reserve-selection="true" 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） --><el-table-column type="selection" width="50" align="center" :reserve-selection="true" :selectable="selected" /><el-table-column type="index" width="100" :index="indexMethod" label="序号"></el-table-column><el-table-column label="姓名" align="center" prop="userName" :show-overflow-tooltip="true" /></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="queryParams.pageNum" :page-sizes="[2, 5, 10, 15]" :page-size="queryParams.pageSize"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize" @pagination="getList" :autoScroll="false" /> --><div class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submitForm">确 定</el-button></div></div>
</template><script>
// import { listPeople } from '@/api/manager/peopleList'
export default {name: 'TablePage5',props: {open: {type: Boolean,default: true},// 默认选中的数据dataList: {type: Array,default: () => {return []}},// 默认为0多选， 传递1单选type: {type: Number,default: 0}},data() {return {// 用户查询参数queryParams: {pageNum: 1,pageSize: 10,search: ''},loading: false,// 用户列表（所有的用户数据）userList: [{userId: 1,userName: '张三'},{userId: 2,userName: '李四'},{userId: 3,userName: '王五'},{userId: 4,userName: '测试1'},{userId: 5,userName: '测试2'},{userId: 6,userName: '测试3'},],// 用户总数total: 0,// 全选按钮隐藏DisableSelection: false,// 选中的人员列表checkList: [],// 选中的人员Id列表checkIds: []}},watch: {// 判断弹框是否显示open: {handler(val) {if (val) {this.getList()}},immediate: true},// 父组件传递过来的之前已经选中的数据dataList: {handler(list) {this.checkList = listif(list){this.checkIds = list.map(item=>item.userId)}},immediate: true,deep: true}},methods: {// 分页相关indexMethod(index) {// this.pageNum当前页码 // this.pageSize 每页条数return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1},// 人员列表getList() {// 根据实际需求，调用对应接口...........// this.loading = true// listPeople(this.queryParams)//     .then(res => {//         console.log(res, '人员列表')//         this.userList = res.rows//         this.total = res.total//         this.loading = false//         数据回显//         this.selectedRecords()//     }).catch(err => {//         console.log(err)//         this.loading = false//     })// 数据回显this.selectedRecords()},// 数据回显 （之前选中的数据，和全部人员数据之间判断，如果userId相同，就表示选中，默认复选框选中）// toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）selectedRecords() {console.log(this.checkList, '数据回显')let that = thisthis.$nextTick(() => {this.userList.forEach((row) => {this.checkList.forEach((child) => {if (row.userId == child.userId) {that.$refs.multipleTable.toggleRowSelection(row)}})})})},// 分页相关handleSizeChange(val) {console.log(`每页 ${val} 条`);this.queryParams.pageSize = val;this.getList()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.queryParams.pageNum = val;this.getList()},// 选择人员弹框handleQuery() {this.queryParams.pageNum = 1this.getList()},// 选择人员重置resetQuery(queryForm) {this.$refs[queryForm].resetFields()this.queryParams.pageNum = 1this.getList()},// 全选：list所有选中的数据组成的列表selectAll(list) {console.log('全选', list)// list为空，表示全不选if (!list.length) { // 全不选// 将当前页表格的数据循环判断是否存在在checkList中，存在就删除this.userList.forEach((item) => {this.checkList.forEach((child, key) => {if (item.userId == child.userId) {this.checkList.splice(key, 1)this.checkIds.splice(key, 1)}})})} else { // 全选// 循环list,将不存在的值加上，已经存在的就不加了list.map((item) => {if (this.checkIds.indexOf(item.userId) == -1) {this.checkList.push(item)this.checkIds.push(item.userId)}})}},// 单选 list所有选中的数据组成的列表，  row当前选中或者取消选中的数据对象selectRow(list, row) {console.log('表格单选', list, row)let rowId = row.userId// 判断当前选项是否已经选择过了， -1表示不存在，没有选择过，  其余则是选择过了let isExist = -1this.checkList.forEach((item, index) => {if (row.userId == item.userId) {isExist = index}})// row.id不存在在list中的时候，说明是取消勾选，undefined表示去除勾选let isDel = list.find(item => {return item.userId == rowId}) == undefinedif (isDel) { //取消勾选// 去除，存在就删除if (isExist != -1) {this.checkList.splice(isExist, 1)this.checkIds.splice(isExist, 1)}} else { // 勾选// 添加if (isExist == -1) {this.checkList.push(row)this.checkIds.push(row.userId)}}},// 选择人员确认// clearSelection 用于多选表格，清空用户的选择submitForm() {let list = []this.checkList.map(item => {list.push(item.userId)})this.checkIds = list// 去重this.checkIds = [... new Set(this.checkIds)]// console.log(this.checkList,'this.checkList')// console.log(this.checkIds,'this.checkIds')this.$emit('submitForm', this.checkIds)// 清除复选框this.$refs.multipleTable.clearSelection()},// 取消按钮cancel() {this.$emit('cancel')// 清除复选框this.$refs.multipleTable.clearSelection()},// 超过1个人禁止选择 (当type为1时候,也就是单选时候)selected(row) {// 限制逻辑，返回 true 则为可勾选，反之则禁止勾选let judge = trueif (this.checkList.length == 1 && this.type == 1) { // 单选judge = this.checkList.some(item => {return item.userId == row.userId})}return judge},// 全选禁用 （当type为1时候，是单选，故全选按钮禁用）// 配合样式使用cellClass() {if (this.type == 1) {return 'DisableSelection'}}}
}
</script><style>
.dialog-footer {width: 100%;display: flex;justify-content: center;margin-top: 50px;
}.el-table .DisableSelection .cell .el-checkbox__inner {display: none;position: relative;
}.el-table .DisableSelection .cell:before {content: '';position: absolute;
}
</style>