Vue2+ElementUI的el-table实现新增数据行与删除的功能

Vue2+ElementUI的el-table实现新增数据行与删除的功能

1. 代码

TableIndex.vue如下

<template>
  <div>
    <div>
      <el-button @click="add" class="filter-item" plain type="primary">新增</el-button>
      <el-button @click="batchDelete" class="filter-item" plain type="danger">删除</el-button>
    </div>

    <el-table :data="tableData.records" :key="tableKey" size="small"
              @selection-change="onSelectChange"
              border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading">
      <el-table-column align="center" type="selection" width="40px" column-key="selectionId"
                       :reserve-selection="true"/>

      <el-table-column v-if="false">
        <template slot-scope="scope">
          <el-input v-model="scope.row.id"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="标题"
                       align="center" prop="blockTitle"
                       width="300px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.blockTitle"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="类型"
                       align="center" prop="blockType"
                       width="120px">
        <template slot-scope="scope">
          <el-select v-model="scope.row.blockType">
            <el-option label="表单" value="0"/>
            <el-option label="表格" value="1"/>
            <el-option label="树表" value="2"/>
            <el-option label="甘特图" value="3"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="数据源" :show-overflow-tooltip="true"
                       align="center" prop="blockUrl"
                       width="">
        <template slot-scope="scope">
          <el-input v-model="scope.row.blockUrl"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否有效"
                       align="center" prop="izValidate"
                       width="150px">
        <template slot-scope="scope">
          <el-radio v-model="scope.row.izValidate" label="1" default>是</el-radio>
          <el-radio v-model="scope.row.izValidate" label="0">否</el-radio>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')" align="center" column-key="operation"
        class-name="small-padding fixed-width"
        width="100px">
        <template slot-scope="{ row }">
          <i @click="singleDelete(row)" class="el-icon-delete table-operation" title="删除" style="color: #f50;"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import {v4 as uuidv4} from 'uuid';

export default {
  name: "TableIndex",
  directives: {elDragDialog},
  filters: {},
  data() {
    return {
      selections: [],
      tableData: {
        records: [],
        total: 0
      },
      tableKey: 0,
      loading: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {

  },
  methods: {
    add() {
      // 添加新行
      this.tableData.records.push({id: uuidv4(), blockTitle: '', blockType: '', blockUrl: '', izValidate: '1'});
    },
    // 单行删除方法
    singleDelete(row) {
      console.log(row)
      this.tableRowsDelete(new Array(row.id))
    },
    //批量删除方法
    batchDelete() {
      if (!this.selections.length) {
        this.$message({
          message: "请先选择需要删除的数据",
          type: "warning"
        });
        return;
      }
      //获取要删除的记录id
      const delIds = this.selections.map(row => row.id);
      this.tableRowsDelete(delIds)
    },
    // 删除表格数据行的方(用于单行及批量删除按钮操作)
    tableRowsDelete(delIds) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //根据id删除
        this.tableData.records = this.tableData.records.filter(item => !delIds.includes(item.id));
        this.$refs.table.clearSelection();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.clearSelections();
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //当选择项发生变化时会触发该事件
    onSelectChange(selection) {
      this.selections = selection;
    },
    //清空表格选择
    clearSelections() {
      this.$refs.table.clearSelection();
    }
  }
};
</script>
<style lang="scss" scoped></style>

2. 效果

1. 新增按钮添加数据行

2. 删除按钮提示是否继续删除