Vue+element-UI实现表格分页和单击单元格编辑

前言

本文使用Vue+element-UI实现表格分页，单击单元格编辑，首行添加完隐藏等功能。布局采用div和el-row以及el-col方式实现.

本文只注重实现功能，不讲究样式好看。完美主义者勿喷！展示图如下：

结构

结构分为4部分：1、首行添加记录按钮；2、表头及表格首行添加行；3、真实数据表格；4、表格跳转插件

1、首行添加记录按钮

<!-- 按钮行 -->
      <el-row>
        <div style="padding-top: 4px; padding-left: 10px">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="addrecommend"
            size="small"
            >添加记录</el-button
          >
        </div>
      </el-row>

<!-- javaScript -->
    // 添加记录
    addrecommend () {
      this.showFlag = 1
    },

主要是一个el-button。在button的基础上添加了一个图标和一个点击事件。实现的效果是：添加行默认隐藏，点击添加记录按钮后显示添加行，添加完成后自动隐藏。

2、表头及表格首行添加行

为了实现这个添加行隐藏的功能，我实际上运用了两张table。第一张table就是下面的这个，这个table实际上不保留数据，所以数据行永远不会超过1行。而第二张没有表头的表格才是真正存储数据的表格。这样做的好处是，添加和存储分开，不互相干扰。

<!-- 表格表头和内容添加 -->
      <el-row>
        <el-table
          style="width: 100%"
          align="center"
          :data="fakeTableData"
          :row-class-name="fakeTableRowClassName"
        >
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="11">
                  <el-button
                    size="mini"
                    @click="handleAdd(scope.$index, scope.row)"
                    >添加</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleClear(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

<!-- Data-->
fakeTableData: [
        {
          index: '--',
          birthday: '',
          bonus: '',
          rewardMethod: ''
        }
      ]

<!-- javaScript -->
fakeTableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
      if (this.showFlag === 0) {
        return 'hidden-row'
      } else {
        return ''
      }
    },
// 表格添加按钮
    handleAdd (index, row) {
      let tdata = this.tableData
      console.log(row)
      tdata.push({
        birthday: row.birthday,
        bonus: row.bonus,
        rewardMethod: row.rewardMethod
      })
      this.showFlag = 0
      row.birthday = ''
      row.bonus = ''
      row.rewardMethod = ''
      this.listnum = this.listnum + 1
    },
// 首行删除变成清理
    handleClear (index, row) {
      row.birthday = ''
      row.bonus = ''
      row.rewardMethod = ''
    }

<!-- css样式 -->
.el-table .hidden-row {
  display: none;
}

主要通过:row-class-name="fakeTableRowClassName"和这个fakeTableRowClassName方法实现首行添加完隐藏。

:row-class-name属性用于设置表格属性，可以用于自定义斑马纹这种。

隐藏功能主要通过showFlag进行判断，默认置为0，这样初始时就会引用.el-table .hidden-row 这个css样式，实现隐藏功能。

通过tdata.push()方法把数据塞到真实表格中

3、真实数据表格包括(表格跳转插件)

<!-- 列表页表格 -->
      <el-row>
        <div style="padding-top: 2px; padding-left: 10px; padding-right: 10px">
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            style="width: 100%"
            stripe
            @cell-click="tableClick"
            :row-class-name="tableRowClassName"
            :height="370 + 'px