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

最新推荐文章于 2024-08-26 10:27:22 发布

liusq_

最新推荐文章于 2024-08-26 10:27:22 发布

阅读量3.7k

点赞数 3

分类专栏： # Vue 文章标签： Vue Element-UI 表格动态列

本文链接：https://blog.csdn.net/qq_39159076/article/details/100032158

版权

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