vue+Element实现固定表头、左侧列、搜索、排序与分页

2019独角兽企业重金招聘Python工程师标准>>>

    <div id="table">
        <el-input v-model="input" placeholder="请输入内容" class="text" style="margin-bottom:15px;max-width:200px;float:right"></el-input>
        <!-- :default-sort="{prop: 'id', order: 'descending'}" 默认排序-->
        <el-table :data="filterData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe style="width: 100%;margin-bottom:25px;" v-bind:height="height">
            <el-table-column prop="id" label="Id" sortable fixed width="50">
            </el-table-column>
            <el-table-column prop="name" label="Item name" width="180">
            </el-table-column>
            <el-table-column prop="url" label="网址" width="180">
            </el-table-column>
            <el-table-column prop="alex" label="Alex" sortable>
            </el-table-column>
            <el-table-column prop="name" label="Item name" width="180">
            </el-table-column>
            <el-table-column prop="url" label="网址" width="180">
            </el-table-column>
            <el-table-column prop="alex" label="Alex">
            </el-table-column>
            <el-table-column prop="country" label="国家">
            </el-table-column>
            <el-table-column prop="country" label="国家">
            </el-table-column>
        </el-table>
       
        <el-pagination style="float:right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next"
            :total="filterData.length">
        </el-pagination>
    </div>

 <script src="../jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
    var app7 = new Vue({
        el: '#table',
        data: {
            tableData: [],
            filtData:[],
            input: "",
            height: 500,
            currentPage:1,
            pagesize:20
        },
        // created() {
        //      $.get("selectBtTable.php?action=init_data_list", data=>{
        //             alert("hi")
        //             this.tableData = JSON.parse(data);
        //             console.log(this.tableData)

        //             //转换数据类型
        //             // $.each(this.tableData3, function(index, item) {
        //             //     this.id = Number(this.id)
        //             // })
        //         })
        // },
        computed: {
            filterData: function() {
                var input = this.input && this.input.toLowerCase()
                var items = this.tableData
                var items1
                if (input) {
                    items1 = items.filter(function(item) {
                        //console.log(Object.keys(item))
                        //return item.country.toLowerCase().match(searchContent);
                        //Object.keys(item)遍历item对象里面的键值是否符合回调函数的测试，通过测试则返回true，否则为false。
                        return Object.keys(item).some(function(key1) {
                            return String(item[key1]).toLowerCase().match(input)
                        })
                    })

                } else {
                    items1 = this.tableData
                }
                return items1

            }
        },
        created() {
            this.getData();
            this.intervalGetData();
        },
        mounted() {

        },

        methods: {
            intervalGetData() {
                var that = this;
                setInterval(function() {
                    //      $.get("selectBtTable.php?action=init_data_list", data => {
                    //     var data = JSON.parse(data);
                    //     this.message = data;
                    //     $('#tableTest1').bootstrapTable('load', this.message);

                    //     //console.log(JSON.parse(data))
                    //     console.log("get data")
                    // })
                    that.getData();
                }, 3000)

            },
            getData() {
                //es6 箭头函数的写法
                //    $.get("selectBtTable.php?action=init_data_list", data => {
                //     var data = JSON.parse(data);
                //     this.message = data;
                //     $('#tableTest1').bootstrapTable('load', this.message);
                //     console.log("init data")
                // })
                var that = this;
                $.get("selectBtTable.php?action=init_data_list", function(data) {
                    var data = JSON.parse(data);
                    that.tableData = data;
                    //转换数据类型
                    $.each(that.tableData, function(index, item) {
                        this.id = Number(this.id)
                    })

                })
            },
             handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
            }
        },
    })
    </script>

 

转载于:https://my.oschina.net/u/2612473/blog/1604567