ant table 勾选某一项表格上下翻页，保留原勾选状态

最新推荐文章于 2023-10-17 10:24:52 发布

述。一牛

最新推荐文章于 2023-10-17 10:24:52 发布

阅读量371

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47981445/article/details/129879060

版权

  <div class="table-box">
                <a-table :columns="columns" :data-source="tableData" bordered
                    :row-selection="{ rowSelection, getCheckboxProps, onChange: onSelectChange }"
                    :rowKey="(record) => { return record.goodsId }" :pagination="false" :loading="loading">
                  
                </a-table>
            </div>

data(){
	tableData: [],
            selectedRowKeys: [],
            loading: true,
         columns: [
                {
                    title: "商品信息",
                    key: "good",
                    scopedSlots: {
                        customRender: "good"
                    },
                },
                {
                    title: "库存",
                    key: "stock",
                    scopedSlots: {
                        customRender: "stock"
                    }
                },
                {
                    title: "是否设置单品促销",
                    key: "promotionDiscountReason",
                    scopedSlots: {
                        customRender: "promotionDiscountReason"
                    },
                    width: 350,
                },
            ],
}

    computed: {
        rowSelection() {
            return {
                // 默认绑定项 this.selectedRowKeys
                getCheckboxProps: (record) => ({
                    props: {
                        disabled: record.allowEnroll ? false : true,
                        name: '',
                        defaultChecked: this.selectedRowKeys && this.selectedRowKeys.length > 0 ? this.selectedRowKeys.includes(record.goodsId) : false,
                    },
                }),
            }
        }
    },
 // 设置不可勾选
        getCheckboxProps(record) {
            return ({
                props: {
                    disabled: record.allowEnroll ? false : true
                }
            });
        },
 // 勾选
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
            console.log(this.selectedRowKeys, 'selectedRowKeys===')
        },