element table行操作，动态添加行，批量删除行

最新推荐文章于 2024-11-15 16:53:46 发布

原创最新推荐文章于 2024-11-15 16:53:46 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

本文档介绍了如何使用 Element UI 的表格组件进行行数据的动态添加与批量删除操作，并提供了详细的代码示例。此外还介绍了如何获取表格中的所有行数据。

1、常用行操作方法笔记

（1）element table动态复制添加行和批量删除多行数据

<el-row>
 <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddDetails">添加一行
        </el-button>
      </el-col>
 <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDeleteManyDetails"
        >删除多行
        </el-button>
      </el-col>
</el-row>


<el-table :data="tabledate" style="width: 100%"
              :row-class-name="rowClassName"
              @selection-change="chandleDetailSelectionChange"
              ref="tb">
      <el-table-column type="selection" width="30" align="center"/>
</el-table-column>
    </el-table>


export default {
//选中的数据
checkedDetail: [],
methods:{
//动态给表格添加行
    rowClassName({row, rowIndex}) {
      row.xh = rowIndex + 1;
    },
    //复制代码，添加一行
    handleAddDetails() {
      if (this.tabledate=== undefined) {
        this.tabledate= [];
      }
      let obj = {};
      //obj.year_month="2021-5";//可以给复制的行设置默认值
      this.tabledate.push(obj);
    },
  //选中数据
    chandleDetailSelectionChange(selection) {
      //只可以选中一行
      // if (selection.length > 1) {
      //   this.$refs.tb.clearSelection();
      //   this.$refs.tb.toggleRowSelection(selection.pop());
      // } else {
      //   this.checkedDetail = selection;
      // }

      //可以选中多行
      this.checkedDetail = selection;
    },
  //可删除多行
    handleDeleteManyDetails(){
        if (typeof(this.checkedDetail) == "undefined" ||this.checkedDetail.length === 0) {
          this.$alert("请先选择要删除的数据", "提示", {
            confirmButtonText: "确定",
          });
        } else {
          console.log("选中的数量："+this.checkedDetail.length);
          this.$confirm('此操作将永久删除该数据,将会删除'+this.checkedDetail.length+'条数据 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
    //主要实现步骤，先把表格行数存到一个新数组
            const arr1=[];
            for (let i = 0; i < this.checkedDetail.length; i++) {
              arr1.push(this.checkedDetail[i].xh);
            }
            //数字数组排序，因为选择框是根据先选择的顺序存到checkedDetail里面，所以需要排序
            arr1.sort(function(a,b){
              return a- b;
            });
            console.log("新数组排序后："+arr1);
            //逐个根据下标删除
            for(let j=0;j<arr1.length;j++){
              this.tabledate.splice(arr1[j] - j-1, 1);
            }


            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
},

}

（2）获取所有行数据

  getAllRows() {
      const RowData = this.$refs.tb.selection;
      for (let i = 0; i < RowData.length; i++) {
        console.log("获取所有行数据：" + RowData[i].(此处为v-model设置的参数));
      }
    },