一、代碼實現(xiàn)

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 則會在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 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
        },
        // 默認選中的數(shù)據(jù)
        dataList: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 默認為0多選， 傳遞1單選
        type: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 用戶查詢參數(shù)
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                search: ''
            },
            loading: false,
            // 用戶列表（所有的用戶數(shù)據(jù)）
            userList: [
                {
                    userId: 1,
                    userName: '張三'
                },
                {
                    userId: 2,
                    userName: '李四'
                },
                {
                    userId: 3,
                    userName: '王五'
                },
                {
                    userId: 4,
                    userName: '測試1'
                },
                {
                    userId: 5,
                    userName: '測試2'
                },
                {
                    userId: 6,
                    userName: '測試3'
                },
            ],
            // 用戶總數(shù)
            total: 0,
            // 全選按鈕隱藏
            DisableSelection: false,
            // 選中的人員列表
            checkList: [],
            // 選中的人員Id列表
            checkIds: []
        }
    },
    watch: {
        // 判斷彈框是否顯示
        open: {
            handler(val) {
                if (val) {
                    this.getList()
                }
            },
            immediate: true
        },
        // 父組件傳遞過來的之前已經(jīng)選中的數(shù)據(jù)
        dataList: {
            handler(list) {
                this.checkList = list
                if(list){
                    this.checkIds = list.map(item=>item.userId)
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        // 分頁相關(guān)
        indexMethod(index) {
            // this.pageNum當(dāng)前頁碼 // this.pageSize 每頁條數(shù)
            return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
        },
        // 人員列表
        getList() {
            // 根據(jù)實際需求，調(diào)用對應(yīng)接口...........
            // this.loading = true
            // listPeople(this.queryParams)
            //     .then(res => {
            //         console.log(res, '人員列表')
            //         this.userList = res.rows
            //         this.total = res.total
            //         this.loading = false
            //         數(shù)據(jù)回顯
            //         this.selectedRecords()
            //     }).catch(err => {
            //         console.log(err)
            //         this.loading = false
            //     })

            // 數(shù)據(jù)回顯
            this.selectedRecords()
        },
        // 數(shù)據(jù)回顯 （之前選中的數(shù)據(jù)，和全部人員數(shù)據(jù)之間判斷，如果userId相同，就表示選中，默認復(fù)選框選中）
        // toggleRowSelection 用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中）
        selectedRecords() {
            console.log(this.checkList, '數(shù)據(jù)回顯')
            let that = this
            this.$nextTick(() => {
                this.userList.forEach((row) => {
                    this.checkList.forEach((child) => {
                        if (row.userId == child.userId) {
                            that.$refs.multipleTable.toggleRowSelection(row)
                        }
                    })
                })
            })
        },
        // 分頁相關(guān)
        handleSizeChange(val) {
            console.log(`每頁 ${val} 條`);
            this.queryParams.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            console.log(`當(dāng)前頁: ${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所有選中的數(shù)據(jù)組成的列表
        selectAll(list) {
            console.log('全選', list)
            // list為空，表示全不選
            if (!list.length) { // 全不選
                // 將當(dāng)前頁表格的數(shù)據(jù)循環(huán)判斷是否存在在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 { // 全選
                // 循環(huán)list,將不存在的值加上，已經(jīng)存在的就不加了
                list.map((item) => {
                    if (this.checkIds.indexOf(item.userId) == -1) {
                        this.checkList.push(item)
                        this.checkIds.push(item.userId)
                    }
                })
            }
        },
        // 單選 list所有選中的數(shù)據(jù)組成的列表，  row當(dāng)前選中或者取消選中的數(shù)據(jù)對象
        selectRow(list, row) {
            console.log('表格單選', list, row)
            let rowId = row.userId
            // 判斷當(dāng)前選項是否已經(jīng)選擇過了， -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)
            // 清除復(fù)選框
            this.$refs.multipleTable.clearSelection()
           
        },
        // 取消按鈕
        cancel() {
            this.$emit('cancel')
            // 清除復(fù)選框
            this.$refs.multipleTable.clearSelection()
        },
        // 超過1個人禁止選擇 (當(dāng)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
        },
        // 全選禁用 （當(dāng)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>

二、效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-807190.html

到了這里，關(guān)于element中Table表格控件單選、多選功能進一步優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！