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"
border