element中的分页,表格多选,数据绑定问题

表格多选的数据是另外展示的,因为展示的数据里也有多选框,需要将这两个双向绑定,请大神帮忙帮忙1.png2.png3.png4.png5.png

已解决 悬赏分:50 - 解决时间 2021-11-29 09:07
反对 0举报 0 收藏 0

回答2

最佳
  • @

    Snipaste_2020-01-09_18-04-05.png

    自问自答环节:

    不用“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
  • @

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

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