首页 > 其他 > 详细

elementui 增加多行表格

时间:2020-11-25 12:14:04      阅读:291      评论:0      收藏:0      [点我收藏+]

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数据

      rowNum: 0,
      table: [
            {
                  name: ‘‘,
            },
      ],

方法

      // 增加行数
      add_row() {
            let len = this.order_rowNum;
            // 判断输入框的内容
            if (this.rowNum === ‘‘ || this.rowNum <= 0 || this.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 => {});
            },

elementui 增加多行表格

原文:https://www.cnblogs.com/JaneLifeBlog/p/14034349.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!