前端vue实现表格的增删功能方法

最新推荐文章于 2024-05-29 15:28:15 发布

高树悲风

最新推荐文章于 2024-05-29 15:28:15 发布

阅读量192

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/Caoshilong1/article/details/132151742

版权

 <div>
        <div>
          <el-form size="small">
            <el-row :gutter="10">
              <el-form-item>
                <template>
                  <el-table border :data="table" style="width: 800px">
                    <el-table-column prop="commodityName" type="text" label="货物名称">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.commodityName"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="specificationModel" type="text" label="规格型号">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.specificationModel"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="unit" type="text" label="单位">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.unit"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="quantity" type="text" label="数量">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.quantity"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="unitPrice" type="text" label="单价">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.unitPrice"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="amount" type="text" label="金额">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.amount"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                      <template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, table)" size="small"> 移除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-form-item>
              <el-button type="primary" @click="addRow(table)">新增</el-button>
            </el-row>
          </el-form>
        </div>

deleteRow(index, rows) {//删除改行
      rows.splice(index, 1);
    },
    // 表格新增
    addRow(table, event) {
      table.push({
        commodityName: '', specificationModel: '',unit: '',quantity: ''
        ,unitPrice: '',amount: ''
      })
      console.log("alldata",table)
    },