vue+element-ui+ ＜el-table＞的下标、序号、列表、tag标签分页功能

原创

已于 2022-06-14 15:15:56 修改 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

懒虫

文章标签：

#vue.js #ui #javascript

于 2022-06-13 17:50:17 首次发布

本文介绍了如何在Vue.js项目中使用Element-UI框架构建一个后台管理系统，展示用户列表并实现分页功能，包括数据获取、表格操作和分页组件的配置。

vue后台系统项目使用element-ui框架实现列表分页功能，获取用户列表数据。

效果：
在这里插入图片描述

页面：

<div class="deit">
    <div class="crumbs">
        <div class="cantainer">
             <el-table style="width: 100%;" :data="userList" align='center'>
                  <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
                  <el-table-column label="日期" prop="date" width="180"> </el-table-column>
                  <el-table-column label="姓名" prop="name" width="180"> </el-table-column>
 				  <el-table-column  label="地址">
				       <template slot-scope="scope">
				            <span style="margin-left: 10px">${
   
    scope.row.address}</span>
				       </template>
				  </el-table-column>
				   {
   
   {
   
   -- 多个tag --}}
				   <el-table-column
				       label="国别"
				       width="120">
				       <template slot-scope="scope">
				           <template v

最低0.47元/天解锁文章