maven网页

最新推荐文章于 2023-08-04 00:18:58 发布

木辉

最新推荐文章于 2023-08-04 00:18:58 发布

阅读量85

点赞数

文章标签： maven vue.js javascript

本文链接：https://blog.csdn.net/qqyang_/article/details/120663622

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生的列表页</title>
    <link rel="stylesheet" href="/element-ui-2.13.2.css">
    <script src="/vue.js"></script>
    <script src="/element-ui-2.13.2.js"></script>
    <script src="/axios.min.js"></script>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="studentId"
                    label="学号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="studentName"
                    label="学生姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="studentSex" :formatter="formatRole"
                    label="学生性别">
            </el-table-column>
            <el-table-column
                    prop="studentPhone"
                    label="学生手机号">
            </el-table-column>
            <el-table-column
                    prop="studentCardId"
                    label="身份证号">
            </el-table-column>
            <el-table-column
                    prop="studentAddress"
                    label="学生地址">
            </el-table-column>
            <el-table-column
                    prop="studentComeDate"
                    label="学生入学时间">
            </el-table-column>
        </el-table>
    </template>
</div>

<script>
    var vm  = new Vue({
        el:"#app",
        data:{
            tableData: []


        },
        methods:{
            formatRole:function (row, column) {
                return row.studentSex == '1' ? "男" : row.studentSex == '0' ? "女" : "aaa";
            },
        },
        created:function () {
            // 页面一加载就要访问url  /student/selectAll
            axios.get("/student/selectAll").then( res=>{
                console.log(res)
                // 把 json 数组 赋值给  tableData
                this.tableData=res.data.data
            } );
        }
    });
</script>
</body>
</html>

木辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
maven网页

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学生的列表页</title> <link rel="stylesheet" href="/element-ui-2.13.2.css"> <script src="/vue.js"></script> <script.
复制链接

扫一扫