elemenui 基础

最新推荐文章于 2024-05-22 11:23:12 发布

PingMo_

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量92

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/PingMo_/article/details/130167297

版权

elementui可以帮你完成优美的网页布局。

使用是引入elementui的js以及css

 <!--引入vue的js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入elementui的js前必须引入vue的js-->
    <script type="text/javascript" src="js/index.js"></script>
    <!--引入elemengtui的css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>

在boay中定义一个div

引用elemen组件

<div id="app">
        <!--:data 引入vue中的变量tableData 必须为数组类型-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <!--el-table-column:表格的列  prop:必须和tableData中的属性名对于 -->
            <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>
    </div>

js部分

let app=new Vue({
            el:"#app",
            data:{
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
      })

js与div 中的数据名要相互对应

elementui+axios后台获取数据

引入axios

<!--引入axios的js-->
    <script type="text/javascript" src="js/axios.min.js"></script>

vue中created（）页面加载完毕后执行该函数

 created(){
                this.fun()
            },
            methods:{
                fun(){
                    axios.post("http://localhost:8080/findAllpage/"+this.currentPage+"/"+this.page,this.formInline).then(result=>{
                        this.tableData = result.data.data.records
                        this.total= result.data.data.total
                        console.log(this.tableData)
                    })
                }

配置后端跨域类

@Configuration // 一定不要忽略此注解
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOrigins("*")
                //.allowedOriginPatterns("*") // 支持域
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}