在vue和element-ui的table中实现分页复选

<el-table-column width="50" type="selection" fixed="left"

<el-table-column label="操作" width="100"

<template slot-scope="scope">
  <el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
</template>
```

模拟数据实现分页

data () {
  return {
    tableData: [],
    multipleSelection: [],
    pagination: {
      currentPage: 1,
      size: 10,
      total: 1000
    }
  }
},
beforeMount () {
  this.fetchData()
},
methods: {
  fetchData () {
    this.tableData = []
    let start = (this.pagination.currentPage - 1) * this.pagination.size
    let end = this.pagination.currentPage * this.pagination.size
    setTimeout(_ => {
      for (let i = start; i < end; i++) {
        this.tableData.push({
          id: i,
          name: `王${i}兰`
        })
      }
    }
  },
  handleCurrentChange () {
    this.fetchData()
  },
  handleSelectionChange (val) {
    this.multipleSelection = val
  },
}

展示已选择项

```

已选:{{ allMultipleSelection }}
原文链接:segmentfault.com

上一篇:vue组件-懒加载
下一篇:vue.extend与vue.component区别

相关推荐

官方社区

扫码加入 JavaScript 社区