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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

2. 效果

1. 新增按钮添加数据行

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