element-ui整合vue

最近小熙在整理以前的代码，碰到了写的element-ui整合vue的项目感觉挺好用的，就用一个案例分享给大家吧。

首先还是直接附上一份单独网页版的代码吧，复制导入vue.js即用，不需要后端，感受下element-ui的强大。

如果想要直接的案例，不想进行简单尝试，请直接调到标题二：案例环境

1. 单独网页版

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--这里是vue的js，只有这个需要自己导入自己的-->
    <script src="../js/vue-2.5.17.js"></script>
    <!--饿了么团队对于Vue封装的插件，这里体现的是分页-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <!--简单实用分页组件，具体和后端整合使用还需配置数据交互-->
    <!--具体数据整合使用请看，前后端分离项目goods-->
<div id="page">

    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>

<script type="text/javascript">
    var data = {
        total: 400,
        pageSize: 100,
        currentPage: 1
    };
    var vue = new Vue({
        el: "#page",
        data: data,
        methods: {
            handleSizeChange(value){
                this.pageSize = value;
            },
            handleCurrentChange(value){
                this.currentPage = value;
            }

        }

    });



</script>

</body>
</html>

效果：

这里展示的是element-ui效果图，如果想要更全可以去官网查询其他的。

2. 案例环境

小熙的前端案例环境是：win10、webstorm、vue.js（2.5.17）可以试试其他的

3.前端

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.5.17.js"></script>
    <script src="../js/axios-v0.18.0.js"></script>
    <!-- 引入网页版样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入网页版组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="goods">
    <!--表格的结构-->
    <table border="1px">
      <tr>
          <th>编号</th>
          <th>名称</th>
          <th>图片</th>
          <th>价格</th>
      </tr>
        <!--从后台获取的数据，填入表格-->
      <tr v-for="(good,index) in goods">
          <td>{{good.id}}</td>
          <td>{{good.name}}</td>
          <td><img :src="good.image" width="100px" height="100px"></td>
          <td>{{good.price}}</td>
      </tr>
    </table>

    <!--饿了吗团队开发的分页组件-->
    <!--background，是显示背景色的组件-->
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>


<script type="text/javascript">


    var data = {
        // 商品数组
        goods: [],
        //一共从后台获取的条数，默认设置为10
        total: 10,
        //当前页码，默认设置为1
        currentPage: 1,
        // 每页展示的条数，默认设置为3，组件中的page-sizes属性数组中可以添加选择展示条目数
        pageSize: 3
    };

    var vue = new Vue({
        el: "#goods",
        data: data,
        methods: {
            //初始化页面
            initGoods(){
               // 访问后端程序获取数据
               axios.get("http://localhost:8091/goods/"+this.currentPage+"/"+this.pageSize).then(response => {
                   this.goods = response.data.data;
                   this.total = response.data.total;
               })
            },
            handleSizeChange(value){
                //将页面选择的每页展示条目数赋值给pageSize
                this.pageSize = value;
                //调用初始化方法，根据赋值的每页展示条目数再次去后台查询
                this.initGoods();
            },
            handleCurrentChange(value){
                //将页面选择的跳转页码赋值给currentPage
                this.currentPage = value;
                //调用初始化方法，根据赋值的跳转页码再次去后台查询
                this.initGoods();
            }
        },
        created(){
            //在vue生命周期的创建之后阶段，调用初始化方法，获取后台的数据并赋值给对应自定义属性
            this.initGoods();
        }
    });


</script>


</body>
</html>

效果：

简单案例的element-ui整合vue的效果图就是这样了，如果有什么问题请点击小熙的头像，获取联系方式和我联系哟。

1. 单独网页版

2. 案例环境

3.前端

猜你喜欢