效果图:

给el-table增加、删除操作

点击新增,增加一行可编辑的空行:

点击删除,删除一行数据:

实现代码:

<el-form class="base-form" ref="basicForm" :model="basicForm"  auto-complete="on">
              <el-table ref="table-input" class="table" highlight-current-row
              :header-cell-style="{background:'#fff',color:'#00447d',textAlign:'center'}"
               :data="basicForm.productTypeList" @row-click="selectProduc">
                <el-table-column label="类型名称" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.typeName" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.typeName`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="销售属性" >
                  <template slot-scope="scope">
                    <el-form-item class="all">
                      <el-input v-model="scope.row.sellType" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.sellType`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="是否公建" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.ifBuilding" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.ifBuilding`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="是否车位" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.ifCarPlace" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.ifCarPlace`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="占地面积(㎡)" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.placeArea" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.placeArea`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="建筑面积(㎡)" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.buildingArea" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.buildingArea`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="地上建筑面积(㎡)" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.onBuildingArea" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.onBuildingArea`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="地下建筑面积(㎡)" >
                  <template slot-scope="scope">
                    <el-form-item  class="all">
                      <el-input v-model="scope.row.underBuildingArea" placeholder="请输入"   @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.underBuildingArea`)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                  <template>
                    <div class="flex-c-a">
                      <span @click="addProducLine()" class="add-btn" style="cursor:pointer">增加</span>
                      <span class="delete-btn" style="cursor:pointer">删除</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
// 选中某一行修改或移除
  selectItem(row, column, event) {
    this.selectedFundRow = row
    if (event.target.innerText == "删除") {
      this.removeFundBtn(this.selectedFundRow)
    }
  },
  // 删除指定行
  removeFundBtn(params) {
    
    this.basicForm.placeInfoList = this.basicForm.placeInfoList.filter((ele) => {
      var flag = false
      // 如果不一致,则保留该行
      for (const key in params) {
        if (ele[key] != params[key]) {
          flag = true
          break
        }
      }
      return flag
    })
    // 如果全部删除后没有可以点击的一行了,需要加一行空行
    if (!this.basicForm.placeInfoList.length) {
      this.addFund()
    }
  },
    // 增加一个空行, 用于录入或显示第一行
    addLine() {
      const newLine = {
        name: "",
        age: "",
        birthday: "",
        address: ""
      }
      this.index++
      this.basicForm.placeInfoList.push(newLine)
    },
<style lang="scss"  scoped>

.all {
    width: 100%;
  }
  .flex-c-a {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .margin-top-10 {
    margin-top: 10px;
  }
  .base-form.el-form-item__content {
    margin-left: 0;
  }
  .add-btn {
    color: #4077F4;
  }
  .delete-btn {
    color: #f56c6c;
  }
</style>

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐