elementui vue实现一个table表格分页效果代码-html代码-BFW代码库

elementui vue实现一个table表格分页效果代码

代码语言：html

所属分类：表格

代码描述：elementui vue实现一个带操作栏的table表格分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">


</head>

<body>
    <div id="app">


        <el-table stripe :data="datetable.slice((currentPage-1)*pagesize,currentPage*pagesize)" border >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="date" label="字典类型"></el-table-column>
            <el-table-column prop="name" label="字典名称"></el-table-column>
            <el-table-column prop="address" label="字典代码"></el-table-column>
             <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagesize" :total="datetable.length" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    currentPage:1,
                    pagesize:10,
                    datetable:[{
                        id: '1',
                        date: '2016-05-01',
                        name: '王小虎1',
                        address: '上海市普陀区金沙江路 101 弄'
                    },
                        {
                            id: '2',
                            date: '2016-05-02',
                            name: '王小虎2',
                            address: '上海市普陀区金沙江路 102 弄'
                        },
                        {
                            id: '3',
                            date: '2016-05-03',
                            name: '王小虎3',
                            address: '上海市普陀区金沙江路 103 弄'
                        },
                        {
                            id: '4',
                            da.........完整代码请登录后点击上方下载按钮下载查看