vue+elementui 之 table+pagination

          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            stripe
            width="300">
            <el-table-column type="selection"
                             align="center"
                             width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              align="center"
              width="160">
            </el-table-column>
            <el-table-column
              prop="level"
              label="精装级别"
              align="center"
              width="160">
            </el-table-column>
            <el-table-column
              prop="creator"
              label="创建人"
              align="center"
              width="160">
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              width="160">
              <template slot-scope="scope">
                <span v-if="scope.row.status==='草稿'">1</span>
                <span v-else-if="scope.row.status==='有效'">2</span>
                <span v-else="scope.row.status==='失效'">3</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="创建时间"
              align="center"
              width="160">
            </el-table-column>
            <el-table-column label="操作"  align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status==='有效'">
                  <el-button type="text"
                             @click="dialogVisible = true" data-num="number">失效</el-button>
                  <el-button type="text"
                             @click="listCheck(scope.$index, scope.row)">查看</el-button>
                </div>
                <div  v-if="scope.row.status==='失效'">
                  <el-button type="text"
                             @click="listCheck(scope.$index, scope.row)">查看</el-button>
                </div>
                <div  v-if="scope.row.status==='草稿'">
                  <el-button type="text"
                             @click="listEdit(scope.$index, scope.row)">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination class="pagination"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>

<script>
  export default {
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        table_index: 999,
        pagesize: 5
      }
    },
    components: {
      
    },
    created() {
      const listUrl = 'https://easy-mock.com/mock/5ab1d3faa93c6716f0951afa/longhuMsg/configList'
      this.$axios.get(listUrl).then((response) => {
        this.tableData = response.data.data.listData
        this.total = response.data.data.listData.length
      })
    },
    methods: {
      handleSizeChange(size) {
        this.pagesize = size
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      },
      listEdit(index, row) {
        this.dialogFormVisible = true
        this.form = Object.assign({}, row)
        this.table_index = index
      },
      listCheck() {
        console.log(1)
      }
    }
  }
</script>