element-ui 分页

先把官网地址放上来：https://element.eleme.cn/#/zh-CN/component/pagination.
如果是单纯在一个表格使用分页组件的话是没有问题的，element的分页组件使用起来十分简便，可以省很多事情。
代码如下：

<!--分页-->
          <el-pagination
            @size-change="handleSizeChange"   //分页组件每页条数发生改变时触发
            @current-change="handleCurrentChange"	//当前页数发生改变时触发
            :current-page="currentPage"			//当前页数
            :page-sizes="pageSizes"				//总的每页条数
            :page-size="pageSize"				//当前每页条数
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum">					//一共的数据量
          </el-pagination>

总的数据：

data () {
    
    
    return {
    
    
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [10, 25, 50, 100],
      // 默认每页显示的条数（可修改）
      pageSize: 10，
      total: 0
    }
  },

添加后只要实现两个方法：

	  handleSizeChange(val) {
    
    
	  	this.pageSize = val
        console.log(`每页 ${
    
    val} 条`)
      },
      handleCurrentChange(val) {
    
    
      	this.currentPage = val
        console.log(`当前页: ${
    
    val}`);
      }

然后在表格：

 <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //这里插入数据
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">

tableData是通过axios获取的总的表格数据。
以上就是简单的分页的实现了。

element-ui 表格复选框

官网地址： https://element.eleme.cn/#/zh-CN/component/table.
这里说一下表格的复选框，复选框其实比分页使用起来更加简单，这里是官网的代码。

 <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>	//主要就是添加这个column值
  </el-table>

添加了上面的值，这一列就出现复选框了，然后是handleSelectionChange方法：

    handleSelectionChange (val) {
    
    
      // 所有选中列的信息集合
      this.multipleSelection = val
      console.log(this.multipleSelection)
    }

该方法会把选中复选框的行的所有信息存入multipleSelection 数组中。

主要问题

原来准备实现一个功能大致是点击删除按钮删除复选框选中的行，如果是这样也不会出现问题，但是我准备给button一个:disabled值，如果没有复选框被选中就无法点击，结果设置以后就出现复选框无法选中，控制台回馈的信息是handleSelectionChange 执行了两次,选中然后又自动取消了，最后发现是tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)这句话和复选框起冲突了，也就是说分页功能只能靠sql分页语句而不能在前端。

解决问题

复选框不变，还是那样，只不过分页语句通过后端完成，主要代码：

表格：

<el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="tableData"
            v-loading="loading"
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            border
            style="width: 100%">
            <!--复选框-->
            <el-table-column type="selection"  width="45"></el-table-column>

 created () {
    
    
    this.getUsers()
    this.showTable(this.currentPage, this.pageSize)
  },

methods: {
    
    
//获取数据总数
getUsers () {
    
    
      var that = this
      this.$ajax({
    
    
        method: 'post',
        url: this.apiUrl + 'userInfo/userCount'
      }).then(function (response) {
    
    
        that.totalNum = response.data
        console.log(response.data)
      })
    },
    //获取分页后的数据
    showTable (currentPage, pageSize) {
    
    
      this.loading = true
      let data = {
    
    
        currentPage: currentPage,
        pageSize: pageSize
      }
      this.$ajax({
    
    
        method: 'POST',
        url: this.apiUrl + 'userInfo/getByPage',
        data: this.$qs.stringify(data)
      }).then(result => {
    
    
        this.loading = false
        this.tableData = result.data
      })
    },
 // 分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
    
    
      this.pageSize = size
      console.log(this.pageSize) // 每页下拉显示数据
      this.showTable(this.currentPage, this.pageSize)
    },
    handleCurrentChange: function (currentPage) {
    
    
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
      this.showTable(this.currentPage, this.pageSize)
    }
}

service层：

    @Override
    public List<UserInfo> selectByPage(Integer currentPage, Integer pageSize) {
    
    
        int cur = (currentPage-1)*pageSize;
        return userInfoMapper.selectByPage(cur,pageSize);
    }

sql语句

	<select id="selectByPage" parameterType="Integer" resultMap="BaseResultMap">
        select * from user_info
        limit #{
    
    currentPage} , #{
    
    pageSize}
    </select>

OK，大功告成！