ElementUI使用

最新推荐文章于 2025-07-02 09:13:14 发布

520_HL

最新推荐文章于 2025-07-02 09:13:14 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

分类专栏：组件文章标签： Element

本文链接：https://blog.youkuaiyun.com/qq_42917455/article/details/83931075

组件专栏收录该内容

2 篇文章

订阅专栏

1 创建vue基本页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>

</head>
<body>
<div id="app">

</div>
<script>

var vm = new Vue({
   el:"#app"

});


</script>

</body>
</html>

2 引入elementUI的组件

  <!-- 引入样式 -->
    <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>

3搜索分页组件（http://element-cn.eleme.io/#/zh-CN ）
4赋值代码

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

添加事件

var vm = new Vue({
   el:"#app",
   data:{
       currentPage:3,// 当前页码
       pageSize:10,// 每页大小
       total:1000
   },
   methods:{
       //? 长度改变----改变每页显示的条数的时候  自动触发
       handleSizeChange(val){
           console.log("长度改变:"+val)
       },
       // 当前改变----当前页码改变之后，触发这个函数
       handleCurrentChange(val){
           console.log("当前改变："+val)
       }


   }

});