位置: IT常识 - 正文
推荐整理分享使用elementUI组件实现表格的分页以及搜索功能(解读elementui的组件源码),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:elementui组件有哪些,解读elementui的组件源码,element 组件,解读elementui的组件源码,element ui组件,vue element组件,elementui常用组件,elementui常用组件,内容如对您有帮助,希望把文章链接给更多的朋友!
主要的UI组件:el-input、el-table、el-pagination
效果展示:
主要功能:
① 完成列表与分页组件的联动,可以通过分页来实现列表数据翻页。
② 通过在搜索栏输入关键词,在列表中展示出与关键词有关数据。
基础设置:一、el-input组件的设置主要代码:
<el-input v-model="inputContent" class="searchinput" placeholder="请输入姓名或身份证进行查询" prefix-icon="el-icon-search" > <el-button slot="append" class="searchbtn" @click="searchput">搜索</el-button></el-input>二、el-table组件的设置主要代码:
<el-table :data="tables[0].slice((currentPage - 1) * pageSize, currentPage*pageSize)" style="width: 100%"> <el-table-column prop="name" label="姓名" width="150"> </el-table-column> <el-table-column prop="idcount" label="身份证号" width="300"> </el-table-column> <el-table-column prop="address" label="所属地区"> </el-table-column><el-table-column prop="cla" label="风险预警场景"> </el-table-column><el-table-column prop="level" label="风险预警等级"width="120"> </el-table-column><el-table-column prop="time" label="风险预警时间"width="120"> </el-table-column><el-table-column prop="result" label="风险预警因素"width="280"> </el-table-column> </el-table>在data中
上一篇:web前端开发期末大作业 ——个人主页(可自取源码)(web前端开发学什么)
友情链接: 武汉网站建设