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'"
            align="center"
            :show-header="false"
          >
            <el-table-column width="50" label="序号" :index="indexMethod">
              <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="出生日期" width="160" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '出生日期'
                  "
                >
                  <el-date-picker
                    v-model="scope.row.birthday"
                    type="date"
                    placeholder="选择日期"
                    size="mini"
                    style="width: 150px"
                    format="yyyy/MM/dd"
                    value-format="yyyy/MM/dd"
                    @blur="inputBlur"
                  ></el-date-picker>
                </span>
                <span v-else>{{ scope.row.birthday }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖金" width="120" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '奖金'
                  "
                >
                  <el-input
                    v-model="scope.row.bonus"
                    maxlength="300"
                    placeholder="输入金额"
                    size="mini"
                    @blur="inputBlur"
                  />
                </span>
                <span v-else>{{ scope.row.bonus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖励方式" width="160" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '奖励方式'
                  "
                >
                  <el-select
                    v-model="scope.row.rewardMethod"
                    slot="prepend"
                    size="mini"
                    style="width: 150px"
                    @blur="inputBlur"
                  >
                    <el-option
                      v-for="item in rewardMethodDropdownOptions"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </span>
                <span v-else>{{ scope.row.rewardMethod }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-row>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!-- el-table分页内容 -->
          <div class="elpagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, jumper, next,total"
              :total="listnum"
            >
            </el-pagination>
          </div>
        </div>
      </el-row>

真实数据表格要注意的一个是表格分页设置。通过和el-pagnation联合实现。

<el-table>的:data属性进行以下设置即可实现表格分页，但是要实现翻页跳转到指定页需要通过pagination联合实现
:data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"

<el-pagination
  @size-change="handleSizeChange" // 页码大小变化
  @current-change="handleCurrentChange" // 当前页变化
  :current-page.sync="currentPage" // 绑定当前页
  :page-size="pageSize" //绑定页码大小
  layout="prev, jumper, next,total" // 展示内容 代码中包括：上一页，跳转，下一页和总条数
  :total="listnum" // 绑定总条数
>
</el-pagination>

<!-- javaScript -->

handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    }

4、全部代码

<template>
  <div>
    <div style="height: 500px; width: 1200px">
      <!-- 按钮行 -->
      <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>
      <!-- 表格表头和内容添加 -->
      <el-row>
        <el-table
          style="width: 100%"
          align="center"
          :data="fakeTableData"
          :row-class-name="fakeTableRowClassName"
        >
          <el-table-column width="50" label="序号" prop="index" align="center">
          </el-table-column>
          <el-table-column
            label="出生日期"
            width="160"
            align="center"
            prop="birthday"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.birthday"
                type="date"
                placeholder="选择日期"
                size="mini"
                style="width: 150px"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="奖金" width="120" align="center" prop="bonus">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.bonus"
                maxlength="300"
                placeholder="填写金额"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="奖励方式"
            width="160"
            align="center"
            prop="rewardMethod"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.rewardMethod"
                slot="prepend"
                size="mini"
                style="width: 150px"
              >
                <el-option
                  v-for="item in rewardMethodDropdownOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <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>
      <!-- 列表页表格 -->
      <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'"
            align="center"
            :show-header="false"
          >
            <el-table-column width="50" label="序号" :index="indexMethod">
              <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="出生日期" width="160" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '出生日期'
                  "
                >
                  <el-date-picker
                    v-model="scope.row.birthday"
                    type="date"
                    placeholder="选择日期"
                    size="mini"
                    style="width: 150px"
                    format="yyyy/MM/dd"
                    value-format="yyyy/MM/dd"
                    @blur="inputBlur"
                  ></el-date-picker>
                </span>
                <span v-else>{{ scope.row.birthday }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖金" width="120" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '奖金'
                  "
                >
                  <el-input
                    v-model="scope.row.bonus"
                    maxlength="300"
                    placeholder="输入金额"
                    size="mini"
                    @blur="inputBlur"
                  />
                </span>
                <span v-else>{{ scope.row.bonus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖励方式" width="160" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.index === tabClickIndex &&
                    tabClickLabel === '奖励方式'
                  "
                >
                  <el-select
                    v-model="scope.row.rewardMethod"
                    slot="prepend"
                    size="mini"
                    style="width: 150px"
                    @blur="inputBlur"
                  >
                    <el-option
                      v-for="item in rewardMethodDropdownOptions"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </span>
                <span v-else>{{ scope.row.rewardMethod }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-row>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!-- el-table分页内容 -->
          <div class="elpagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, jumper, next,total"
              :total="listnum"
            >
            </el-pagination>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showFlag: 0, // 添加行展示
      fakeTableData: [
        {
          index: '--',
          birthday: '',
          bonus: '',
          rewardMethod: ''
        }
      ],
      rewardMethodDropdownOptions: [
        {
          label: '现金',
          value: '现金'
        },
        {
          label: '代金券',
          value: '代金券'
        }
      ],
      tableData: [],
      pageSize: 10, // 每页展示条数
      currentPage: 1, // 当前页
      listnum: 0, // 条数统计
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '' // 当前点击的列名
    }
  },
  methods: {
    // 添加记录
    addrecommend () {
      this.showFlag = 1
    },
    // 假表表格行处理
    fakeTableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
      if (this.showFlag === 0) {
        return 'hidden-row'
      } else {
        return ''
      }
    },
    // 表格行处理
    tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // 表格添加按钮
    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
    },
    // 表格删除按钮
    handleDelete (index, row) {
      this.tableData.splice(index, 1)
    },
    // 表格首行删除清理
    handleClear (index, row) {
      row.birthday = ''
      row.bonus = ''
      row.rewardMethod = ''
    },
    // 失去焦点初始化
    inputBlur (row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
    // 表格单元格单击事件
    tableClick (row, column, cell, event) {
      switch (column.label) {
        case '出生日期':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '奖金':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '奖励方式':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default:
      }
    },
    // 表格排序
    indexMethod (index) {
      return index
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    }
  }
}
</script>

<style>
.el-table .hidden-row {
  display: none;
}
</style>