首页 ›  文章

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

2019-12-04

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

</el-table-column> <el-table-column prop="id" label="ID" > </el-table-column> <el-table-column prop="name" label="名字" > </el-table-column>

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

<template slot-scope="scope">
  <el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
</template>
</el-table-column> </el-table> <el-pagination background @current-change="handleCurrentChange" :current-page.sync="pagination.currentPage" :page-size="pagination.size" layout="total, prev, pager, next, jumper" :total="pagination.total" slot="pagination" > </el-pagination> ```

模拟数据实现分页

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区别
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入