DevTools console没有数据,element-ui的分页写法,VUE+ElementUI实现table 行上下移动的效果

一.DevTools console没有数据
因为没有翻墙,所以返回了谷歌本来的数据

二.
@ /：表示 src目录下；
. /：表示当前目录下；
…/ : 表示上一级目录 ;

三.element-ui的分页写法
https://www.cnblogs.com/zhoulifeng/p/9395295.html
1.userAdmin.vue

<!-- 表格 -->
                    <el-table :data="studentData.slice((currentPageStudent-1)*pagesize,currentPageStudent*pagesize)"  @cell-click="examine" > 
                    < !--:data="studentData.slice((currentPageStudent-1)*pagesize,currentPageStudent*pagesize)"  这是分页代码 -->
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="idCode" label="学号"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="username" label="姓名"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="gender" label="性别"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="age" label="年龄"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="120%" prop="email" label="邮箱"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="120%" prop="identityCard" label="身份证号码"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="point" label="积分"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="interested" label="感兴趣活动"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="Participated" label="已参加活动"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="cancel" label="已取消活动"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="friend" label="他的伙伴"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" min-width="60" prop="action" label="操作">
                            <div style="cursor:pointer;" @click="action">查看</div>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="record" label="">
                            <div style="cursor:pointer;width:80px"  @click="record">积分记录</div>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="blockPage">
                    <el-pagination
                            @size-change="handleSizeChangeStudent"
                            @current-change="handleCurrentChangeStudent"
                            :current-page-student="currentPageStudent"
                            :page-sizes="[5, 10, 20, 40]"
                            :page-size="pagesize"         
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="studentData.length">  
                    </el-pagination>
                </div>
        </el-tab-pane>
        export default {
    data() {
        return {
            // 分页事件
            // 学生
            currentPageStudent:1, //初始页
            pagesize:10,    //    每页的数据
           },
          methods: {
        // 分页事件
        // 学生
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChangeStudent: function (size) {
                this.pagesize = size;
                // console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChangeStudent: function(currentPageStudent){
                this.currentPageStudent = currentPageStudent;
                // console.log(this.currentPage)  //点击第几页
        },
        }
   }

四.如何让element-ui的table组件使用不同分辨率的屏幕

1.min-width 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列

五.VUE+ElementUI实现table 行上下移动的效果
上下移动的核心思想是

//上移
      moveUp(index,row){
        var that = this;
        console.log('上移',index,row);
        console.log(that.URLModles[index]);
        if (index > 0) {
          let upDate = that.URLModles[index - 1];
          that.URLModles.splice(index - 1, 1);
          that.URLModles.splice(index,0, upDate);

删除当前行,并添加到下一行,
index是通过scope.$index获取的当前行所在数组的下标

<template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.$index===0"
              @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i></el-button>
            <el-button
              size="mini"
              :disabled="scope.$index===(URLModles.length-1)"
              @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
            <el-button type="info" size="mini" round v-if="scope.$index===0">默认</el-button>
</template>