element 前端分页及删除某条数据

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[10]"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

export default{
	data(){
	 page: 1, // 分页 页数
	            limit: 10, // 分页 当前条数
	            total: null, //分页 总条数
	            tableList: [], // 分页数据
	            tableData:{itemList:[]},  // 页面总数据
	},
	async created(){
		await this.init()
		
	},
	methods:{
		// 获取总数据
	async init(){
		this.tableData.itemList = await XXXX();
		this.getList()
		},
		// 分页处理数据
        getList() {
            this.tableList = this.tableData.itemList.filter((item, index) => {
                return index < this.page * this.limit && index >= this.limit * (this.page - 1)
            })
            this.total = this.tableData.itemList.length
        },
        // 当每页数量改变
        handleSizeChange(val) {
            console.log(`每页${val}条`);
            this.limit = val
            this.getList()
        },
        // 当当前页改变
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getList()
        },
        // 删除某一行数据后
        deletes(params){
		// 根据 params 里的 某个找到 总数据的那一条
		let index = this.tableData.itemList.findeIndex(item=> item.id ===params.id )
		if(index > -1){
			this.tableData.itemList.splice(index,1)
			}
		}
		 /** 
       * 判断 总条数 是否可以是10的倍数,得到页数  不然会出现bug
      */
     if(this.tableData.itemList.length % 10 === 0){
      this.page = this.tableData.itemList.length / 10 === 0 ? 1 : this.tableData.itemList.length 		/ 10
    }
      this.getList();
	}
}



 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView. PagerView是一个好看精巧的分页控件. PagerView+TableView为网页开发提供了类似的工具, 但代码更简单, 功能更紧凑. SelectorView是一个由两个TableView组合而成的控件, 相对于列表选择器, 提供了一个临时的存放已选中项的地方. 更新日志: •2010-01-11, 重新组织文档, 将各个功能单独分开介绍, 提供"Getting Started". 使用jsdoc生成API文档. •2009-10-19, 数据列表使用数组保存, 取代原来的哈希, 因为哈希的元素可能是无序的(依赖于浏览器实现). •2009-09-07, 增加TableView的演示. •2009-08-14, 增加演示控件选择功能, 可以自定义是否显示某个控件, 如计数, 标题, 过滤, 行选择框, 分页等. •2009-08-13, 加入分页控件PagerView, 实现TableView的分页功能, 通过TableView.display.pager(bool类型)来控制. PagerView是一个独立的控件, 使用原生的JavaScript代码编写. •2009-08-01, 加入模糊过滤控件, 通过TableView.display.filter(bool类型)来控制. •2009-07-29, 优化, 在关键点使用原生的DOM接口替代jQuery. •2009-07-29, 加入元素数量和当前已标记行数量的统计. •2009-07-29, 增加TableView.delRange方法. 修改SelectorView.select和SelectorView.unselect方法, 应用TableView.addRange和TableView.delRange方法. •2009-07-28, 增加TableView.addRange方法, 用于添加数据集合, 解决性能问题. •2009-07-24, 取消TableView.refresh方法, 修改TableView.add方法, 添加和删除行会立即自动刷新界面. 增加良好注释. •2009-07-23, SelectorView增加双击选择或者取消选择的功能. •2009-07-23, 高亮显示被选中的行.
当然可以!以下是使用 Element UI 创建一个具备分页、增删改功能的前端表格示例: 首先,你需要在你的项目中引入 Element UI 的相关依赖。你可以通过 npm 或者直接在 HTML 文件中引入 Element UI 的 CDN 来完成这一步。 接下来,你可以使用 Vue 组件来创建一个包含表格和对应操作的页面。下面是一个示例: ```vue <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.$index)" type="primary" size="mini">编辑</el-button> <el-button @click="handleDelete(scope.$index)" type="danger" size="mini">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, // 其他数据... ], currentPage: 1, pageSize: 10, total: 0 }; }, methods: { handleEdit(index) { // 编辑操作 // 可以通过 index 获取对应的数据 }, handleDelete(index) { // 删除操作 // 可以通过 index 获取对应的数据 this.tableData.splice(index, 1); }, handleSizeChange(size) { // 每页显示条数变化 this.pageSize = size; }, handleCurrentChange(page) { // 当前页码变化 this.currentPage = page; } } }; </script> ``` 在上面的示例中,我们使用了 `el-table` 组件来展示数据,其中每一列都对应了数据对象的某个属性。我们还使用了 `el-pagination` 组件来实现分页功能。你可以根据需要自定义表格的列和操作按钮,并在对应的方法中实现编辑和删除的逻辑。 这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值