el-table选中一行数据进行移除

首先先上效果图

 选择一行，点击移除操作，

 

 选中的一行被移除。

 接下来就是全部代码

<template>
  <div class="app-container">
    <div class="form-container">
      <el-form
        ref="searchForm"
        label-width="100px"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item class="search-button">
          <div class="form-button">
            <el-button type="primary" icon="el-icon-delete" @click="del()">移除(R)</el-button>
          </div>
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      height="240"
      @cell-click="chooseItem"
    >

      <el-table-column v-for="(item,index) in tableList" :key="index" :label="item.label" :prop="item.name" align="center" />
    </el-table>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  export default {
    name: 'ExcelTransferTable',
    components: { },
    directives: { waves },
    data() {
      return {
        tableList: [
          {
            label: '姓名',
            name: 'name'
          }, {
            label: '性别',
            name: 'sex'
          }, {
            label: '班级',
            name: 'className'
          }],
        tableData: [], // 表格里面的数据
        Id: ''
      }
    },
    created() {
      this.tableData = [{
                          Id: '1',
                          name: '孙梅梅',
                          sex: '女',
                          className: '一年级一班'
                        },
                        {
                          Id: '2',
                          name: '张丽丽',
                          sex: '女',
                          className: '一年级二班'
                        },
                        {
                          Id: '3',
                          name: '王帅',
                          sex: '男',
                          className: '一年级一班'
                        },
                        {
                          Id: '4',
                          name: '刘强',
                          sex: '男',
                          className: '一年级二班'
                        }]
    },
    methods: {
      del() {
        // 判断有没有选中一行数据
        if (!this.Id) return this.$message.warning('请先选择一条数据进行移除')
        this.$confirm('您确定要删除当前选择的记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
   //定义一个新的数组
          const tempArr = []
   //遍历table表的数组，如果遍历到的table中的id不等于选中的那一行id，那么将数
 据push到新的数组里面，也就是说，新的数组里面没有选中的那一行的值
          this.tableData.forEach(item => {
            if (item.Id !== this.Id) {

              tempArr.push(item)
            }
          })
//将新的数组赋值给table表数组，此时选中那一行删除成功
          this.tableData = tempArr
//将选中的一行id置空。
          this.Id = ''
        })
      },
//row是选中这一行的全部数据，如果table的数组是从后端请求回来的，可以将id替换成每一行唯一的那个标志，比如序号等等。
      chooseItem(row) {
        this.Id = row.Id
      }
    }
  }
</script>

<style lang="scss" scoped>

.chargeType{
  /deep/ .el-select{
    width: 90%;
  }
}
</style>