3

最近在用element-ui vue版 开发运营系统,分页是后端来分页,前端用的element-ui,现在在做一个多选表格
如下图
clipboard.png
每一次分页,都会获得列表,渲染在表格上,要求用户点击表格,第一页 第二页随便点,最后点击保存,会向后端传送一个关于id的数组,这个容易实现,用本地存储起来就可以。那么我从后端获取数据的时候,如何回显呢?因为每次跳到第一页和第N页 都需要渲染那个选中状态,有类似的demo吗?

2017-06-14 提问

查看全部 2 个回答

10

已采纳

reserve-selection与row-key结合

<el-table :data="pageData" ref="goodsTable" size="small" v-loading="loading" height="520" @selection-change="handleSelectionChange" :row-key="getRowKeys">
    <el-table-column type="selection" :reserve-selection="true" width="50" prop="id">
    </el-table-column>
    <el-table-column label="编号" prop="goodsCode" width="130">
    </el-table-column>
    <el-table-column label="品名" prop="tradeName" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="规格" prop="specification" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="最小包装" prop="minPack" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="状态" prop="saleState" width="100">
        <template scope="scope">
            <el-tag>{{scope.row.saleState | statusFilter}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="生产厂家" prop="manufacturer" show-overflow-tooltip>
    </el-table-column>
</el-table>
export default {
    filters: {
        statusFilter(status) {
            if (status !== '' && status !== null) {
                const statusMap = {
                    '1': '待审批',
                    '2': '销售中',
                    '3': '已拒批',
                    '4': '已停售'
                };
                return statusMap[status];
            }
            return '—';
        }
    },
    data() {
        pageData: [],
        loading: false,
        // 获取row的key值
        getRowKeys(row) {
            return row.id;
        },
        selectedData: []
    },
    methods: {
        handleSelectionChange(rows) {
            this.selectedData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.selectedData.push(row.id);
                    }
                });
            }
            console.log(this.selectedData);
        }
    }
}

推广链接