JavaWeb第六次作业

最新推荐文章于 2024-10-14 21:11:20 发布
hinxx
最新推荐文章于 2024-10-14 21:11:20 发布
阅读量169
点赞数 3
文章标签： java servlet 开发语言
本文链接：https://blog.csdn.net/hinxx/article/details/139151629
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/element.css">

</head>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>

<body>
<div id="app">
    <el-table
            :data="filteredData"
            style="width: 100%">
        <el-table-column
                label="id"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="author">
        </el-table-column>
        <el-table-column
                label="朝代"
                prop="dynasty">
        </el-table-column>
        <el-table-column
                label="头衔"
                prop="title">
        </el-table-column>
        <el-table-column
                label="风格"
                prop="style">
        </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-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>

        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model="currentPage"
            :page-sizes="[2, 3, 4, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredData.length">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            search: '',
            currentPage: 1,
            pageSize: 5,
            total: 0,
            tableData: [ {"id":1,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                {"id":2,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                {"id":3,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
                {"id":4,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                {"id":5,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                {"id":6,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
                {"id":7,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                {"id":8,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                {"id":9,"author":"libai","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"}
            ]

        },
        computed: {
            filteredData() {
                return this.tableData.filter(data => !this.search || data.author.toLowerCase().includes(this.search.toLowerCase()));
            },
            paginatedData() {
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                return this.filteredData.slice(startIndex, endIndex);
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findAll();
                this.currentPage = 1;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
            },
            findAll(){
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                this.paginatedData = this.filteredData.slice(startIndex, endIndex);
            }
        }
    });
</script>
</html>