element-ui 实现卡片式列表，选择，分页代码

最新推荐文章于 2025-06-24 13:15:00 发布
NRlovestudy
最新推荐文章于 2025-06-24 13:15:00 发布
阅读量1.6w
点赞数 2
CC 4.0 BY-SA版权
分类专栏：前端 VUE
本文链接：https://blog.youkuaiyun.com/NRlovestudy/article/details/82747299
前端同时被 2 个专栏收录
105 篇文章
订阅专栏
VUE
7 篇文章
订阅专栏
这是浏览器效果：
以下是代码实现：
实际应用中，踩了几个坑，总结为下面代码中的3个关键点。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
 <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import jquery -->
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
 <!-- import Vue before Element -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- import JavaScript -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<style type="text/css">
html, body {                         /***关键点1：设置body高度100%!***/
    height: 100%;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
}

/* 中间列表 */
.page_l{                            /***关键点3：设置列表部分overflow样式!***/
float:left;
margin-left:1%;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}

.page_photo2{clear:both; width:100%;}
.page_photo2 ul{clear:both; width:100%; margin:7px 0 0 0;}
.page_photo2 ul li{width:180px; float:left; margin:0 20px 21px 0;}
.page_photo2 ul li.last{margin:0 20 21px 0;}
.page_photo2 ul li span{width:180px; height:215px; display:block; overflow:hidden;}
.page_photo2 ul li div{width:180px;display:block; overflow:hidden;}
.page_photo2 ul li div button{width:50px;color:#fff;}
.page_photo2 ul li div button:first-child{background-color:#449d44;border-color: #398439;}
.page_photo2 ul li div button:nth-child(2){background-color: #c9302c;border-color: #ac2925;}
.page_photo2 ul li span img{width:100%; display:block;}
.page_photo2 ul li h3{clear:both; width:100%; line-height:24px; height:24px; overflow:hidden; font-size:15px; color:#333; margin:9px 0 0 0; text-align:center;}
.page_photo2 ul li a:hover h3{color:#e30002;}
.hide{display:none;}

/* 底部分页样式 */
.pager01{
background-color:#B2EBF2;
left:0;
bottom: 0;
width:100%; 
height:50px; 
position: fixed; 
text-align: center;
list-style: none;
padding-top:8px;

}

</style>

<body>

<!-- 第一部分   -->
<div class="search-area" style="padding:20px;border: 1px solid #ccc;background: #efefef;">

		
	   <div style="display:inline-block">
			<label >名称:</label>
			<input type="text"  name="name" id="name"  style="width:120px" placeholder="请输入名称">
       </div>
        
      
		<div style="display:inline-block">
			<button onclick="chickSearch()">搜索</button>
			<button  onclick="reset()">重置</button>
		</div>
</div>


<!-- 第二部分   -->
<div class="search-area" style="padding:20px;border: 1px solid #ccc;background: #efefef;">
      <button onclick="addBtn()">新增</button>
	  <button onclick="addBtn()">修改</button>
	  <button onclick="addBtn()">删除</button>
</div>


<!-- 第三部分   -->
<div id="vue-body">

<!-- 3.1 列表部分   -->
<div class="page_l">
   
  <label >选中项的ID: </label><input id="selectedid" v-bind:value="checkList"  style="display:inline-block;width:80%"/>   
	  
	 <div id="infolist" class="infolist page_photo2">
	    <ul>
	       <li v-for="item in items">
		     
			  <a v-bind:href="item.url" v-bind:title="item.introduce">
			  <span><img v-bind:src="item.url" ></span>
			  </a>
              
			  <!-- 多选框以及修改删除单项操作   -->
	          <input type="checkbox"  :id="item.id" @click="checked(item)" :checked="checkList.indexOf(item.id)>-1"/>
	          <label :for="item.id">{{item.name}}</label>
	          <div id="caozuo">
	             <button id="editsingle" @click="editone(item)">修改</button> 
		         <button id="delsingle" @click="delone(item)">删除</button> 
	         </div>

	       </li>
	    </ul>
	    
    </div> 
      
</div>

<!-- 3.2 底部分页      -->
<div id="pager" class="pager01">
    
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentpage"
      :page-sizes="pageSizesList"
      :page-size="pagesize"
	  layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    
     
</div> 


</div>

 
</body>
 
</html>

<script type="text/javascript">

 $(function () {
    //设置列表部分高度                  /***关键点2：设置列表部分高度，防止区域重叠!***/
	var heightall = document.body.clientHeight;
	
	var height01 = $(".search-area").eq(0).outerHeight();
	var height02 = $(".search-area").eq(1).outerHeight();
	var height03 = $(".pager01").outerHeight();
	
	var heightlist = heightall-height01-height02-height03;
	
	$(".page_l").height(heightlist);


	vm.initPage();

}); 

var vm = new Vue({
	  el: '#vue-body',
	  data:
	  {
		items: [], 
		checkList: [],
		pageSizesList: [10, 20, 30, 50, 100],
		pagesize:10,
		currentpage: 1,
		total: 0
	  },
	 
	  methods: {
		 //重新加载页面方法放在VUE内部，打开页面和每次增删改操作都调用一次
		 //演示用 initPage
		 initPage : function () { 
			   var thispage = this;
				thispage.items=[
			   {id:1,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:2,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:3,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:4,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:5,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:6,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:7,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:8,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:9,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			   {id:10,name:'图片',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
			  ];
			   thispage.total = 110;
		       
		},
       //实际应用中的 initPage
       /*  initPage : function () { 
			   var thispage = this;
			   $.ajax({                              //必须采用ajax格式，否则数据不会更新
		          type:"post",
		          url:"getinfo",
		          data:{
		        	    //ajax请求参数
				    	 "pagesize":thispage.pagesize,
				         "page":thispage.currentpage
		          },
		          success:function(data){
		        	  thispage.checkList=[]; //清空已选
		        	  thispage.items=data.rows;
		        	  thispage.total=data.total;
		         }
		        })

		},
		*/

		//分页相关
		handleSizeChange(val) {
			var thispage = this;
			thispage.pagesize=val;
			thispage.currentpage=1;
			thispage.initPage();
			
	    },
	    handleCurrentChange(val) {
	    	var thispage = this;
	        thispage.currentpage=val;
	        thispage.initPage();
		},
		
		 checked(item) {      //点击一次选中，再点击一次取消选中
			var thispage = this;
	        if (thispage.checkList.indexOf(item.id) > -1) 
	        {
	          let index = thispage.checkList.indexOf(item.id);
	          thispage.checkList.splice(index, 1);
	        } 
	        else {
	        	thispage.checkList.push(item.id);
	        }
	      },
	      editone(item) {
	    	  var thispage = this;
	    	  thispage.checkList=[];
	    	  thispage.checkList.push(item.id);
		      editBtnone(item.id); 
		       
		   },
	      delone(item) {
			   var thispage = this;
			   thispage.checkList=[];
			   thispage.checkList.push(item.id);
		       delBtnone(item.id);
		       
		   },
		  
	  }
})

</script>