elementui 增加多行表格


html

      <span>添加</span>
      <el-input type='number' v-model="order_rowNum" placeholder="请输入行数"></el-input>
      <span>行明细</span>
      <el-button type="primary" min="1" @click='add_row'>添加</el-button>
      <!-- 表格 -->
      <el-table :data="table" border>
            <el-table-column label="操作" width='80px'>
                  <template slot-scope="scope">
                       <el-button plain size="small" type="danger" @click="delect(scope.$index)">删除</el-button>
                  </template>
            </el-table-column>
            <el-table-column label="名称">
                  <template slot-scope="scope">
                        <el-input type="textarea"  :autosize="{ minRows: 1}" placeholder="请输入内容" v-model="scope.row.name"></el-input>
                  </template>
            </el-table-column>
      </el-table>

data数据

      order_rowNum: 0,
      table: [
            {name: '',},
      ],

方法

      // 增加行数
      add_row() {
            let len = this.order_rowNum;
            // 判断输入框的内容
            if (this.order_rowNum=== '' || this.order_rowNum<= 0 || this.order_rowNum=== null) {
                  this.$message({
                        message: '请输入正确的行数!',
                        type: 'error'
                    });
                } else {
                    if (len > 0) {
                        for (let i = 1; i <= len; i++) {
                            let list = {
                                name: '',
                            }
                            this.table.push(list);
                        }
                        return this.table;
                    } else {
                        return this.table;
                    }
                }
            },
            // 删除按钮
            delect(index) {
                this.$confirm('确认删除表格信息?', '提示', {
                        showClose: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        this.table.splice(index, 1);
                    })
                    .catch(action => {});
            },


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM