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

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-for="tag in scope.row.nations">
				               <el-tag :key="tag.name">
				                   ${tag.name}
				               </el-tag>
				           </template>
				       </template>
				   </el-table-column>
				   <el-table-column
					   prop="is_size"
				       label="是否分码"
				       width="80"
				       filter-placement="bottom-end">
				       <template slot-scope="scope">
				           <el-tag v-if="scope.row.is_size == 0">否</el-tag>
				           <el-tag v-else>是</el-tag>
				       </template>
				   </el-table-column>
				   <el-table-column style="align: center" fixed="right" label="操作" width="200" align="center">
				     <template slot-scope="scope">
				          {{-- 权限控制 --}}
				       	 @if (\Encore\Admin\Facades\Admin::user()->can('editAction') || \Encore\Admin\Facades\Admin::user()->isAdministrator())
				       		<el-button @click="handleClick(scope.$index)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
				       	 @endif
					     @if (\Encore\Admin\Facades\Admin::user()->can('delAction') || \Encore\Admin\Facades\Admin::user()->isAdministrator())
					       <el-button @click="deleteUserByUserName(scope.row,scope.$index)" type="text" size="small" icon="el-icon-delete" style="color: red">删除</el-button>
				    	 @endif
				     </template>
				   </el-table-column>

             </el-table>
             <el-pagination
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     {{-- 下拉框展示的分页条数 --}}
                     :page-sizes="[20, 30, 40]"
                     {{-- 显示当前行的条数  --}}
                     :page-size="pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">  <!-- 数据总数  -->
                 >
              </el-pagination>
        </div>
    </div>
  </div>
 

需要data中定义，userList接受接口返回的数据

delimiters: ['${', '}'],
data () {
      return {
          currentPage:1, //当前页
             pagesize:20,//分页的数据
             total: 0, //总页数
             userList: []
      }
  },

created() {
        this.handleUserList()
    },
    methods: {
        handleSizeChange(val) {
                this.pagesize = val;
                this.handleUserData();
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.handleUserData();
        },
        handleUserData() {
            //接口请求，传递分页参数
                let params = {
                        pageSize:this.pageSize,
                        currentPage:this.currentPage
                        //pageNum:this.pageNum
                }
            getUserList(params).then(res => {
                this.userList = res.data;
                this.total = res.total;
                //this.total = res.data.length;
            })
        },
        getUserList(){
            var that = this;
				$.ajax({
                    url: "/admin/cutting/getData",
                    type: "POST",
                    data:{
                        '_token': "{{ csrf_token() }}",
                        'search_word' : that.search_word,
                        'pageSize':that.pageSize,
                        'currentPage':that.currentPage,
                    },
                    dataType:'json',
                    success: function (res) {
                        if (res.code == 1) {
                            console.log(res)
                            that.datas = res.data;
                            that.total = res.total;
                        }else{
                            that.$alert(res.msg, '提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    }
                });
		}
    }
 

vue方法中获取el-table的下标和序号

• type=“index”:就是显示序号
• scope.$index:就是选中行的下标
• scope.row:就是选中行的所有的信息
  例如：scope.row.name:获取姓名