elment排行

最新推荐文章于 2024-06-17 10:49:46 发布

氢氧化水

最新推荐文章于 2024-06-17 10:49:46 发布

阅读量202

点赞数

分类专栏： elment ui 文章标签： php

本文链接：https://blog.csdn.net/weixin_59063045/article/details/119418370

版权

elment ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .el-carousel__item img {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-aside width="800px"><el-carousel height="300px" >
            <el-carousel-item v-for="item in carousel" :key="item">
                <img :src="item.img" style="width: 100%;height: 100%">
            </el-carousel-item>
        </el-carousel></el-aside>


        <el-main><el-tabs @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
                <table border="1px" width="600px">
                    <tr width="100px">
                        <td>ID</td>
                        <td>工作</td>
                        <td>内容</td>
                        <td>数量</td>
                    </tr>
                    <tr v-for="item in info" :key="item" width="100px">
                        <td>{{item.id}}</td>
                        <td>{{item.job}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.num}}</td>
                    </tr>
                </table>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
                <table border="1px" width="600px">
                    <tr width="100px">
                        <td>ID</td>
                        <td>数量</td>
                    </tr>
                    <tr v-for="item in jiang" :key="item" width="100px">
                        <td>{{item.tid}}</td>
                        <td>{{item.name}}</td>
                    </tr>
                </table>
            </el-tab-pane>
        </el-tabs></el-main>
    </el-container>



</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            carousel:[],
            info:[],
            jiang:[]
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab.name);
                if (tab.name === 'first'){
                    axios
                        .get('http://www.week3.com/Oly/bang/info').then(res => (
                        console.log(res.data.data),
                            this.info = res.data.data)).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
                }else if(tab.name === 'second'){
                    axios
                        .get('http://www.week3.com/Oly/bang/jiang').then(response => (
                        // console.log(response.data.data),
                            this.jiang = response.data.data)).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
                }

            }
        },
        created(){
            axios
                .get('http://www.week3.com/Oly/bang/create').then(response => (
                // console.log(response.data.data),
                    this.carousel = response.data.data)).catch(function (error) { // 请求失败处理
                console.log(error);
            });
        },
    })
</script>
</body>
</html>

控制器后台

public function create()
    {
        $data = img::select();
        $data && $data = $data->toArray();
        return json(['data'=>$data,'msg'=>'','code'=>0]);
    }

    /**
     * 保存新建的资源
     *
     * @return \think\Response
     */
    public function info()
    {
        $data = info::select();
        $data && $data = $data->toArray();
        return json(['data'=>$data,'msg'=>'','code'=>0]);
    }

    /**
     * 显示指定的资源
     *
     */
    public function jiang()
    {
        $data = type::select();
        $data && $data = $data->toArray();
        return json(['data'=>$data,'msg'=>'','code'=>0]);
    }

氢氧化水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
elment排行

页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><style>
复制链接

扫一扫