el-form里面嵌套el-table表格，可以进行新增数据和删除并对input框进行校验

最新推荐文章于 2024-11-14 10:06:05 发布

阳光雨滴

最新推荐文章于 2024-11-14 10:06:05 发布

阅读量449

点赞数

文章标签： vue.js elementui javascript

原文链接：https://blog.youkuaiyun.com/m0_46348803/article/details/129614044

版权

文章描述了在Vue应用中使用ElementUI的el-dialog和el-table组件创建一个可编辑表格，实现实时添加和删除行的功能，同时包含数据验证功能，适用于IT技术中的表单管理和数据录入场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-button  type="primary" @click="submitAdd" style="float: right;margin-bottom:20px">新增一行</el-button>
      <el-form ref="form" :model="form" :rules="rules">
        <el-table stripe :data="form.tableData" border>
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>名称</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="rules.name" >
                <el-input v-model="scope.row.name" placeholder="请输入名称" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>支架</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.holderData`" :rules="rules.holderData">
                <el-input v-model="scope.row.holderData" placeholder="请输入支架" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>已知容量</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.capacityKnown`" :rules="rules.capacityKnown">
                <el-input v-model="scope.row.capacityKnown" placeholder="请输入已知容量" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>容量</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.capacityData`" :rules="rules.capacityData">
                <el-input v-model="scope.row.capacityData" placeholder="请输入容量" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>长距离</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.isLong`" :rules="rules.isLong">
                <el-input v-model="scope.row.isLong" placeholder="请输入长距离" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  align="center">
            <template slot="header">
              <span><span class="colorRed">*</span>压力损失数据</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.pressureData`" :rules="rules.pressureData">
                <el-input v-model="scope.row.pressureData" placeholder="请输入压力损失数据" class="input"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="130px" >
            <template slot-scope="scope">
              <el-button type="text" @click="tableDataDelete(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="form.tableData.length >= 1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>
export default{
   data(){
      return{
         form: {
           tableData: [],
          // 表单校验
         rules: {
            name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
            holderData: [{ required: true, message: '请输入支架', trigger: 'blur' }],
            capacityKnown: [{ required: true, message: '请输入已知容量', trigger: 'blur' }],
            capacityData: [{ required: true, message: '请输入容量', trigger: 'blur' }],
            isLong: [{ required: true, message: '请输入长距离', trigger: 'blur' }],
            pressureData: [{ required: true, message: '请输入压力损失数据', trigger: 'blur'}],
        }
      },
    }
  },
  methods:{
    //添加
    submitAdd() {
      this.form.tableData.push({
        name: '',
        holderData: '',
        capacityKnown: '',
        capacityData: '',
        isLong: '',
        pressureData: ''
      })
      console.log(this.form.tableData)
    },
    //删除
    tableDataDelete(index) {
      this.form.tableData.splice(index, 1)
    }
  }
}

效果图