vue el-table 动态添加行与删除行的实现

目录el-table动态添加行与删除行el-table合计行放在首行首先在el-table,添加属性2.定义合计行的位置和样式3.合计行的数据el-table动态添加行与删除行项目中有需要动...

目录

el-table 动态添加行与删除行

项目中有需要动态添加和删除 el-table 行的需要，就学习了下，发现很简单：

<template>
 <el-dialog
  width="50%"
  :visible.sync="isShow"
  :before-close="beforeClose"
  title="自定义设备类型属性">
  <div class="dialogDiv">
   <el-table
    :data="tableData.filter(data => handleAdd || data.name.tjsoLowerCase().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>
     </templahttp://www.cppcns.comte>
    </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 方法便可实现动态添加行和删除行。

原理：vue是数据驱动 dom 进行渲染，所以改变 el-table 绑定的数组，就可以改变 el-table。

点击“添加”按钮就给数组添加一行数据，从而表格也会新增一行，点击“删除”按钮就删除数组当前的这一行数据，从而表格删除当前行。

el-table 合计行放在首行

效果如图所示

首先在el-table ,添加属性

summary-method=“getSummaries” show-summary

<div clapythonss="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="活动月"></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.定义合计行的位置和样式

方法一：通过css 控制

// 合计行样式
.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操作将合计行放置到首行

在mounted中调用该方法即可

showSummariesPosition() {
      const table = document.querySelector('.customTable') // customTable这个是在el-tablphpe定义的类名
      const footer = document.querySelector(
        '.customTable .el-table__footer-wrapper'
      )
      const body = document.querySelector(
        '.customTable .el-table__body-wrapper'
      )
      table.removeChild(footer) // 移除表格最下方的合计行
      table.insertBefore(footer, body) // 把合计行插入到表格body的上面
    },

3. 合计行的数据

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
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。