vue|el-table表格添加一行删除一行并且验证必填

我们在工作中，难免会遇到一些特殊的场景。比如动态表格的实现，主要的实现就是可以增加删除列，并且需要对数据进行验证。如何在vue中使用el-table添加一行删除一行并且验证必填呢？请看VCR

下面是代码示例：

<template>
  <div style="display: flex;justify-content: center; align-items: center;height: 100%;margin-top: 200px;">
    <el-card style="width:1000px;height:600px">
      <el-button type="primary" size="small" style="display: flex;float: right;margin-bottom: 10px;" @click="AddTab">
        <el-icon>
          <Plus />
        </el-icon>
        添加一行
      </el-button>
      <el-form :model="addform" ref="addform" :rules="rules">
      <el-table :data="addform.tableData" border height="450px">
        <el-table-column type="index" label="序号" min-width="60"></el-table-column>
        <el-table-column prop="productName" label="商品名称" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productName'" :rules="rules.productName">
              <el-input v-model="scope.row.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="productType" label="商品类型" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productType'" :rules="rules.productType">
              <el-select v-model="scope.row.productType" placeholder="请选择商品类型" clearable filterable>
                <el-option value="1" label="春装"></el-option>
                <el-option value="2" label="夏装"></el-option>
                <el-option value="3" label="秋装"></el-option>
                <el-option value="4" label="冬装"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="productPrice" label="商品价格" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productPrice'" :rules="rules.productPrice">
              <el-input v-model="scope.row.productPrice" type="number" placeholder="请输入商品价格"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="danger" size="small" @click="DelTab(scope.row)">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
      <div style="align-items: center;display: flex;justify-content: center;margin-top: 10px;">
        <el-button type="primary" @click="SaveTab" size="small">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addform:{
          tableData: [],
        },
        rules:{
          productName:[{required: true, message: '请输入商品名称', trigger: 'blur' }],
          productType:[{required: true, message: '请选择商品类型', trigger: 'change' }],
          productPrice:[{required: true, message: '请输入商品价格', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.queryTable();
    },
    methods: {
      //查询列表
      async queryTable() {
        //模拟后端传过来的数据
        var result = [
          { id: 1, productName: '衬衫', productType: '1', productPrice: 60 },
          { id: 2, productName: '连衣裙', productType: '2', productPrice: 90 }
        ];
        //赋值
        this.addform.tableData = result;
      },
      //添加行
      async AddTab() {
        //获取表格最后一行的id
        var pid = this.addform.tableData[this.addform.tableData.length - 1]?.id;
        //添加行数据
        var model = { id: pid + 1, productName: '', productType: '', productPrice: null }
        this.addform.tableData.push(model)
      },
      //删除行
      async DelTab(row) {
        //filter过滤数据
        this.addform.tableData = this.addform.tableData.filter(o => { return o.id != row.id })
      },
      async SaveTab(){
        this.$refs.addform.validate(valid=>{
          if(valid){
            //---后端接口处理
            this.$message.success("保存成功")
          }
        })
      }
    }
  }
</script>

知识点

1）filter过滤，可以筛选掉不需要的数据this.addform.tableData.filter(o => { return o.id != row.id })。return后面限制要过滤的条件。

2）push插入。可以用来往数组里面插入数据。

3）this.$refs.addform.validate（）必填验证，this.$refs指向el-form的ref,获取el-form的元素。实现rules的验证。

4）:rules="rules"验证规则

5）:prop="'tableData[' + scope.$index + '].productName'"为什么prop这样绑定而不是直接绑定productName。这是el-form记录的数据是单条数组，但是el-table记录的是多条数据的集合。所以我们要找到表格中的哪一行的输入框。所以使用scope.$index去找到tableData的行数据。

最后

如果有哪里不懂的可以私信我。这个比较复杂，对初学者很不友好，但是对于刚开始工作的小伙伴有可能会有用。后续我会开一个专栏专门讲基础的vue.