Vue+Element表格动态列+表格分页

LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页
效果如图：

代码：

引用JQuery，Vue，Element等文件，换成自己的路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- JQuery --><script type="text/javascript" src="../../js/jquery-1.9.0.min.js" ></script><!-- getURL方法 --><script src="../../js/url.js"></script><!-- 引入Vue --><script src="../../js/vue.js"></script><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入Element组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><title>表格动态列及分页</title>
</head>

body

<body>
<div id="list"><div id="tableComponentApp"><div><!-- 表格上方按钮，根据自己需要 --><div align="right"><el-button type="text" @click="addProperty()" >新增属性</el-button><el-button type="text" @click="addChannel()" >新增节目</el-button></div><!-- 表格 --><!-- ：data="body.data",这里就是表格所要展示的数据list了 --><el-table:data="body.data"borderstyle="width: 100%"><!-- 动态表头,根据head[]里的数据生成，prop是字段名，lable表头展示 --><!-- item.propertyName对应body.data中各对象的字段名 --><el-table-columnv-for="item in head":prop="item.propertyName":label="item.propertyShow"show-overflow-tooltip></el-table-column><!-- 操作列 --><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button @click="edit(scope.row.id)" type="text" size="small">编辑</el-button><el-button @click.native.prevent="deleteById(scope.$index, body,scope.row.id)" type="text" size="small">删除</el-button></template></el-table-column></el-table><!-- 分页工具 --><!-- handleSizeChange、handleCurrentChange是methods里的方法，对应size改变、当前页改变值时调用 --><!-- body.curr、body.size、body.count都是从后台传回的数据，分页必须绑定 --><el-pagination background@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="body.curr":page-sizes="[5, 10, 50, 100, 200]":page-size="body.size"layout="total, sizes, prev, pager, next, jumper":total="body.count"></el-pagination></div></div>
</div>
<script>new Vue({el:'#list',data() {return {head:[],//表头body:{}//表中数据}},created: function() {   //初始化表格var propertiesUrl = getURL("properties");var channelUrl = getURL("list");var _this = this;//请求表头数据，$.get(propertiesUrl, function (result) {_this.head = result;   //将返回结果赋给表头绑定的body[]//除了请求的数据外的新增列，除了unshift（放在最前），还有push方法（放在最后）_this.head.unshift({propertyName:"title", propertyShow:"节目名称"});_this.head.unshift({propertyName:"id", propertyShow:"ID"});});//获取表格数据$.get(channelUrl, function (result) {_this.body = result; //将返回结果赋给表格绑定的body[]})},methods: {deleteById(index,body,id) {   //删除操作var _this = this;_this.$confirm('此操作将永久删除'+id+', 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//发起删除请求$.post(getURL("delete"), {id:id}, function (result) {_this.$alert(result);if (result == 'success') {body.data.splice(index, 1); //删除表格中的行}});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});})},edit(id) {window.location.href=getURL("pages/vue/modify.html")+"?id="+id},handleSizeChange(val) {   //size改变console.log(`每页 ${val} 条`);this.body.size = val;this.body.curr = 1;this.getList();  //刷新表格数据，调用getList()},handleCurrentChange(val) { //当前页改变console.log(`当前页: ${val}`);this.body.curr = val;this.getList();   //刷新表格数据，调用getList()},//获取刷新列表数据getList() {var _this = this;_this.loading = true;//发起数据获取请求$.get(getURL("list"), {page: _this.body.curr, limit: _this.body.size}, data => {_this.loading = false;_this.body = eval(data)//重新赋值给body[]})},//表格上方按钮绑定方法addChannel() {window.location.href=getURL('pages/vue/add.html')},addProperty() {window.location.href=getURL('pages/vue/propertyAdd.html')}}})
</script>
</body>
</html>

head[]返回数据如下：

[{"propertyName": "actors","propertyShow": "演员"
}, {"propertyName": "points","propertyShow": "评分"
}, {"propertyName": "release_time","propertyShow": "上映时间"
}, {"propertyName": "dfdfds","propertyShow": "测试"
}, {"propertyName": "desc","propertyShow": "简介"
}]

body[]返回数据如下：
list?page=1&limit=5

{"size": 5,"count": 6,"curr": 1,"data": [{"actors": "actor","dfdfds": "ceshi","profile": "jianjie","id": "10242","title": "12314","points": "point","release_time": "shijian","desc": "12314简介"}, {"actors": "234","dfdfds": "2324","profile": "123","id": "10243","title": "123","points": "234","release_time": "4354"}, {"actors": "32432","dfdfds": "2","profile": "3243254","id": "10244","title": "34546","points": "1234","release_time": "2"}, {"actors": "1232444444","dfdfds": "11111111111111111111111","profile": "123345423","id": "10245","title": "11111111111111111111111111111","points": "1","release_time": "1"}, {"actors": "","dfdfds": "2321","profile": "","id": "10246","title": "21321","points": "213","release_time": "213"}]
}

Vue+Element表格动态列+表格分页相关推荐

html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
element表格动态列、本地分页、动态form、自定义校验集成
json数组生成table列表格数据本地分页列支持动态显示/隐藏,列顺序支持自定义编辑行,根据行数据动态生成form form支持自定义校验 <template> <div&g ...
element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是 ...
使用element封装动态配置表格
说明:最近几个月负责公司部门vue项目的前端架构任务,该组件的设计实现,主要考虑提高业务开发效率,实现表格的动态化配置,对项目中常见的业务页面,能以较少的代码量,通过简单的json配置实现表格和表单的 ...
vue element项目常见实现表格内部可编辑功能
目录前言正文 1.简单表格行内内部可编辑 2. 数据从后端取得表格行内可编辑 3.批量表格整体的可编辑结语前言后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用.使 ...
ABP 多模块关联查询、分组统计、列转行、Vue 复合表头动态列
本文记录了一次使用abp Core5 ,vue 开发复杂报表的经历. 0.需求概述业务需求是:统计一个化工厂车队形式记录数据中异常停车的报表,维度可以按照车俩.驾驶员两个维度进行统计,统计的元素有: ...
html动态生成可输入的表格,动态生成表格.html
动态生成表格 table, thead, tr, th, td{ border: 0; } th { width: auto; } 姓名科目成绩操作 // 使用对象储存的数据,列表 data = [ ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...

Vue+Element表格动态列+表格分页

Vue+Element表格动态列+表格分页相关推荐

最新文章

热门文章