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 = list
                if(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 = this
            this.$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 = 1
            this.getList()
        },
        // 选择人员重置
        resetQuery(queryForm) {
            this.$refs[queryForm].resetFields()
            this.queryParams.pageNum = 1
            this.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 = -1
            this.checkList.forEach((item, index) => {
                if (row.userId == item.userId) {
                    isExist = index
                }
            })
            // row.id不存在在list中的时候，说明是取消勾选，undefined表示去除勾选
            let isDel = list.find(item => {
                return item.userId == rowId
            }) == undefined
            if (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 = true
            if (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>

二、效果图