vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)

更新時(shí)間：2022年07月26日 10:50:04 作者：＊且聽風(fēng)吟

這篇文章主要介紹了vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-table 動(dòng)態(tài)添加行與刪除行

項(xiàng)目中有需要?jiǎng)討B(tài)添加和刪除 el-table 行的需要，就學(xué)習(xí)了下，發(fā)現(xiàn)很簡(jiǎn)單：

<template>
? <el-dialog
? ? width="50%"
? ? :visible.sync="isShow"
? ? :before-close="beforeClose"
? ? title="自定義設(shè)備類型屬性">
? ? <div class="dialogDiv">
? ? ? <el-table?
? ? ? ? :data="tableData.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"?
? ? ? ? style="width: 100%" border>
? ? ? ? <el-table-column prop="code"?
? ? ? ? ? :label="$t('basicData.device.propDlg.code')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="maxValue"?
? ? ? ? ? :label="$t('basicData.device.propDlg.maxValue')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="minValue"?
? ? ? ? ? :label="$t('basicData.device.propDlg.minValue')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="name"?
? ? ? ? ? :label="$t('basicData.device.propDlg.name')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="valueType"?
? ? ? ? ? :label="$t('basicData.device.propDlg.valueType')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="warning"?
? ? ? ? ? :label="$t('basicData.device.propDlg.warning')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column align="center" width="160px">
? ? ? ? ? <template slot="header" slot-scope="scope">
? ? ? ? ? ? <el-button v-model="handleAdd"?
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="success"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-plus"
? ? ? ? ? ? ? @click="handleAdd(scope.$index, scope.row)"> ? ? ?
? ? ? ? ? ? ? {{ $t('common.add') }} ? ? ?
? ? ? ? ? ? </el-button>
? ? ? ? ? </template>
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-edit"
? ? ? ? ? ? ? @click="handleEdit(scope.$index, scope.row)">
? ? ? ? ? ? ? {{ $t('common.edit') }}
? ? ? ? ? ? </el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="danger"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-delete"
? ? ? ? ? ? ? @click="handleDelete(scope.$index, scope.row)">
? ? ? ? ? ? ? {{ $t('common.delete') }}
? ? ? ? ? ? </el-button>
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? </el-table>
? ? </div>
? ? <span slot="footer">
? ? ? <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
? ? ? <el-button @click="confirm" type="primary">{{ $t('common.confirm') }}</el-button>
? ? </span>
? </el-dialog>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? tableData: []
? ? }
? },
? methods: {
? ? // 添加行
? ? handleAdd() {
? ? ? let row = {
? ? ? ? code: "",
? ? ? ? maxValue: "",
? ? ? ? minValue: "",
? ? ? ? name: "",
? ? ? ? valueType: "",
? ? ? ? warning: ""
? ? ? }
? ? ? this.tableData.push(row)?
? ? },
? ? // 編輯
? ? handleEdit(index, row) { ??
? ? },
? ? // 刪除行
? ? handleDelete(index, row) {
? ? ? this.tableData.splice(index, 1)
? ? },
? ? cancel() {
? ? ? this.$emit("cancel")
? ? },
? ? confirm() {
? ? ? this.$emit("confirm", this.tableData)
? ? }
? }
};
</script>

<style lang="scss" scoped>
.dialogDiv {
? height: 300px;
? overflow: auto;
}
</style>

以上 handleAdd 和 handleDelete 方法便可實(shí)現(xiàn)動(dòng)態(tài)添加行和刪除行。

原理：vue是數(shù)據(jù)驅(qū)動(dòng) dom 進(jìn)行渲染，所以改變 el-table 綁定的數(shù)組，就可以改變 el-table。

點(diǎn)擊“添加”按鈕就給數(shù)組添加一行數(shù)據(jù)，從而表格也會(huì)新增一行，點(diǎn)擊“刪除”按鈕就刪除數(shù)組當(dāng)前的這一行數(shù)據(jù)，從而表格刪除當(dāng)前行。

el-table 合計(jì)行放在首行

效果如圖所示

效果圖

首先在el-table ,添加屬性

summary-method=“getSummaries” show-summary

<div class="contentInfoWrap">
            <el-table :data="tableData" class="customTable" :summary-method="getSummaries" show-summary border :header-cell-style="HeadTable" :cell-style="columnStyle"
              :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column width="150" fixed>
                <template slot="header">
                  <div></div>
                </template>
                <template slot-scope="scope">
                  <div class="filstColumn">
                    <span>{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" width="120" prop="name" label="活動(dòng)月"></el-table-column>
              <el-table-column align="center" width="120" prop="channel" label="渠道"></el-table-column>
              <el-table-column align="center" width="120" prop="number" label="CPT VOL(箱)"></el-table-column>
            </el-table>
          </div>

2.定義合計(jì)行的位置和樣式

方法一：通過css 控制

// 合計(jì)行樣式
.el-table__footer-wrapper tbody td,
.el-table__header-wrapper tbody td {
  background-color: #e3f3ff !important;
  color: #666;
}
.el-table__footer-wrapper .is-leaf {
  color: #666 !important;
}
.el-table__fixed-footer-wrapper tbody td {
  border-top: 1px solid #ebeef5;
  background-color: #e3f3ff;
  color: #666;
  text-align: center !important;
}
.has-gutter tr td .cell {
  text-align: center;
  color: #001111;
}
//合并行放在第一行
.contentInfoWrap .el-table {
  display: flex;
  flex-direction: column;
}
.contentInfoWrap .el-table__body-wrapper {
  order: 1;
}
.contentInfoWrap .el-table__fixed-body-wrapper {
  top: 97px !important;
}
.contentInfoWrap .el-table__fixed-footer-wrapper {
  z-index: 0;
  top: 50px;
}

方法二：通過DOM操作將合計(jì)行放置到首行

在mounted中調(diào)用該方法即可

showSummariesPosition() {
      const table = document.querySelector('.customTable') // customTable這個(gè)是在el-table定義的類名
      const footer = document.querySelector(
        '.customTable .el-table__footer-wrapper'
      )
      const body = document.querySelector(
        '.customTable .el-table__body-wrapper'
      )
      table.removeChild(footer) // 移除表格最下方的合計(jì)行
      table.insertBefore(footer, body) // 把合計(jì)行插入到表格body的上面
    },

3. 合計(jì)行的數(shù)據(jù)

getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = 'Total(銷量)'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' '
        } else {
          sums[index] = ' '
        }
      })
      return sums
    },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: