element中的分页，表格多选，数据绑定问题_前端问题_站长_知道

表格多选的数据是另外展示的，因为展示的数据里也有多选框，需要将这两个双向绑定，请大神帮忙帮忙

已解决悬赏分：50 - 解决时间 2021-11-29 09:07

点赞 0反对 0举报 0 收藏 0

回答2

最佳

@aiascq

自问自答环节：

不用“selection-change”，是因为有我解决不了的bug，所以我把表格中“勾选数据行”和“勾选全选”分开了

html:

<template>
    <div>
        <div class="content">
            <el-table ref="multipleTable" class="main-table" :data="tableData" border  tooltip-effect="dark" style="width: 100%" @select="handleSelectionChange"  @select-all="handleSelectionChangeAll" :row-key="getRowId">
                <el-table-column type="selection" width="55" :reserve-selection="true" />
                <el-table-column type="index" label="序号" align="center" width="60" />
                <el-table-column label="日期" align="center" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center" width="120">
                </el-table-column>
                <el-table-column prop="address" align="center" label="地址" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <el-pagination
            class="pagination"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="prev, pager, next"
            :total="total">
            </el-pagination>
            </div>
            <div class="content-title">
            <span>已选择</span>
        </div>
        <div class="content-main">
            <div class="main-tips">
                <div class="main-tipsContext">
                    <el-row class="result-list" v-for="(item, index) in  multipleSelection" :key="index" >
                        <el-col :span="1">
                            <el-checkbox v-model="item.yes" @change="delFile(item,index)"  :checked="selection(item.id)"></el-checkbox>
                        </el-col>
                        <el-col :span="14">
                            {{index+1}}、 {{item.name}}
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

js:

<script>
    export  default {
        data() {
            return {
                //模拟数据
                d: {
                    1: [
                        {
                        date: '2016-05-03',
                        name: '王小虎1',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 1,
                        yes: false
                        }, {
                        date: '2016-05-02',
                        name: '王小虎2',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 2,
                        yes: false
                        }, {
                        date: '2016-05-04',
                        name: '王小虎3',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 3,
                        yes: false
                        }, {
                        date: '2016-05-01',
                        name: '王小虎4',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 4,
                        yes: false
                        }, {
                        date: '2016-05-08',
                        name: '王小虎5',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 5,
                        yes: false
                        }
                    ],
                    2: [
                        {
                        date: '2016-05-06',
                        name: '王小虎6',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 6,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎7',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 7,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎8',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 8,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎9',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 9,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎10',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 10,
                        ys: false
                        }
                    ],
                    3: [
                        {
                        date: '2016-05-06',
                        name: '王小虎11',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 11,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎12',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 12,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎13',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 13,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎14',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 14,
                        yes: false
                        }, {
                        date: '2016-05-06',
                        name: '王小虎15',
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 15,
                        yes: false
                        }
                    ],
                    length: 15,
                    pageNum: 1
                } ,
                //当前页数据
                tableData: [],
                //选中项列表
                multipleSelection: [],
                //当前页
                currentPage: 1,
                //总数据数量
                total: null,
            }
        },
        methods: {
            //初始化假数据，无视
            initList(param) {
                this.currentPage = param.pageNum//页数
                this.tableData = param[param.pageNum]//当前页数据
                this.total = param.length//总条数
            },
            //多选
            handleSelectionChangeAll(val) {
                if(val) {
                    val.forEach(one => {
                        one.yes = true
                    })
                }
                this.multipleSelection = [...val]
            },
            //单选
            handleSelectionChange(val) {
                let select = [...val]
                let flag = ''
                let exist = ''
                if(select) {
                    select.forEach(one => {
                        //select和multipleSelection对比元素值是否相等，相等返回true，不相等返回false
                        flag = this.multipleSelection.some(item => (item.fileName === one.fileName && item.id === one.id))
                        one.yes = true
                    })
                }
                //select和multipleSelection不相等加入multipleSelection，反之移除
                if(!flag) {
                    this.multipleSelection = [...select]
                } else {
                    this.multipleSelection.forEach((one, idx) => {
                        exist = select.some(item => (item.fileName === one.fileName && item.id === one.id))
                        if(!exist){
                            this.multipleSelection.splice(idx, 1)
                        }
                    })
                }
            },
            //分页
            handleCurrentChange(val) {
                this.d.pageNum = val
                this.initList(Object.assign(this.d, {pageNum: val}))
            },
            //multipleSelection中的checked是否选中
            selection(row){
                return  this.multipleSelection.some(item => (item.id === row))
            },
            //当前行id（设置唯一值区分）
            getRowId(row){
                return  row.id
            },
            //multipleSelection中取消选中时，删除当前并将列表中的选中取消（通过toggleRowSelection控制）
            delFile(item,idx) {
                this.multipleSelection.splice(idx, 1)
            }
        },
        mounted(){
            this.initList(this.d)
        },
        updated(){
            this.tableData.forEach((item, index) \=> {
                this.$refs.multipleTable.toggleRowSelection(item, this.multipleSelection.some(one  \=> (item.id \===  one.id)))
            })
        }
    }
</script>

支持 0 反对 0 举报

2021-11-28 09:05

@coien1983
1、分页加载的table数据每次都是按照页码查询、即使第一列选中后，切换2页table的数据会重新渲染，不回出现这种问题，看下选中的流水是否需要重置
table多选重置
```
table 添加ref ref="multipleTable"

js执行、在数据加载完或时间中执行
this.$refs.multipleTable.clearSelection()
```
支持 0 反对 0 举报 2021-11-28 09:16