zoukankan      html  css  js  c++  java
  • element table批量删除

    很小的一个问题,但是有细节需要注意

    (1)问题:在起初我写的时候是根据元素的name是否相同判断是否是同一个节点,出现的问题就是,如果说两个元素的name相同,就会判断出错

    (2)代码:

    <template>
      <div class="main">
        <div style="margin-top: 20px">
          <el-button @click="handleDelete()" type="danger">批量删除</el-button>
        </div>
        <template>
        <el-table
            class="mytable"
            :data="tableData"
            stripe
            style=" 50%"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column
            prop="date"
            label="日期"
            width="180">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址">
            </el-table-column>
        </el-table>
    </template>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          selectedData: [],
          tableData: [
            {
              date: "2016-05-03",
              name: "王小虎1",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333
            },
            {
              date: "2016-05-03",
              name: "王小虎1",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333
            },
            {
              date: "2016-05-02",
              name: "王小虎2",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333
            },
            {
              date: "2016-05-04",
              name: "王小虎3",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333
            }
          ]
        };
      },
      methods: {
        deleteRow(index, rows) {
          rows.splice(index, 1);
        },
        handleSelectionChange(data) {
          this.selectedData = data;
        },
        handleDelete() {
          var that = this;
          var val = this.selectedData;
          if (val) {
            val.forEach(function(item, index) {
              that.tableData.forEach(function(itemI, indexI) {
                if (item === itemI) {
                  that.tableData.splice(indexI, 1);
                }
              });
            });
          }
          this.$refs.multipleTable.clearSelection();
        }
      }
    };
    </script>
    <style scoped>
    .main {
      padding: 40px;
    }
    .mytable {
      margin-top: 15px;
    }
    </style>

  • 相关阅读:
    Flink架构、原理与部署测试
    EntityFramework 简单入个门
    Gdb远程调试Linux内核遇到的Bug
    掌握jQuery插件开发
    两分钟实现安全完备的登录模块
    SQL Server 手把手教你使用profile进行性能监控
    Paxos 实现日志复制同步
    作用域是什么
    Consul 服务注册与服务发现
    C语言之预处理
  • 原文地址:https://www.cnblogs.com/excellencesy/p/11609762.html
Copyright © 2011-2022 走看看