当前位置:首页 > 程序心得 > 正文内容

element table 表格添加行,删除行记录

admin5年前 (2020-05-14)程序心得1399
  <el-table
                :data="tableData"
                style="width: 100%"
                border>
            <el-table-column
                    prop="bookname"
                    :label="recoveryOne"
                    width="140px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.bookname" type="number"></el-input>
                </template>
            </el-table-column>

            <el-table-column
                    prop="bookvolume"
                    :label="recoveryTwo"
                    width="140px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.bookvolume" type="number"></el-input>
                </template>
            </el-table-column>

            <el-table-column
                    prop="bookborrower"
                    :label="recoveryThree"
                    width="150px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.bookborrower" type="number"></el-input>
                </template>
            </el-table-column>

            <el-table-column>
                <template slot-scope="scope">
                    <button @click="addLine"
                            class="addBtn"
                            v-if="scope.$index == tableData.length - 1">
                        <i class="el-icon-plus"></i>
                    </button>

                    <button v-if="tableData.length > 1"
                            @click="handleDelete(scope.$index, scope.row)"
                            class="del-btn">
                        <i class="el-icon-minus"></i>
                    </button>
                </template>
            </el-table-column>
        </el-table>
export default {
    data() {
        return {
            tableData:[{
                bookname: '',
                bookborrower: '',
                bookvolume:''
            }]
        }
    },
    methods:{
        addLine(){ //添加行数
            var newValue = {
                  bookname: '',
                  bookborrower: '',
                  bookvolume:''
              };
            //添加新的行数
            this.tableData.push(newValue);
        },
        handleDelete(index){ //删除行数
            this.tableData.splice(index, 1)
        },
        save(){
          //这部分应该是保存提交你添加的内容
          console.log(JSON.stringify(this.tableData))
        }
    }
 }


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/299.html

分享给朋友:

“element table 表格添加行,删除行记录” 的相关文章

Mysql 触发器使用(含navicat使用案例)

Mysql 触发器使用(含navicat使用案例)

CREATE TRIGGER updateutime2 BEFORE UPDATE on yp_cms_score for EACH ROW BEGIN  SET NEW.utime= ...

多行文字溢出[...]的实现(text-overflow: ellipsis)

多行文字溢出[...]的实现(text-overflow: ellipsis)

对于单行文字, 很简单. Css代码  .oneLine {      width: 200px;      overflow:&...

RSA密钥的生成与配置(支付宝公私密钥可用)

RSA密钥的生成与配置(支付宝公私密钥可用)

RSA密钥的生成与配置openssl下载地址http://dldx.csdn.net/fd.php?i=20313208579480&s=ac2e809e168f7d5b8bf1515d3d6b1aa4,或者官方下载通过openssl工具生成RSA的公钥和私钥(opnssl工具可在互联网中下...

JQ 获取验证码倒计时方法

JQ 获取验证码倒计时方法

html: <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default"  id="show-not...

微信支付 总提示get_brand_wcpay_request:fail 也不跳转支付页面 的解决方案

微信支付 总提示get_brand_wcpay_request:fail 也不跳转支付页面 的解决方案

最近在做微信支付,帮客户部署好环境后,测试微信支付,发现点击支付后老是提示:get_brand_wcpay_request:fail,于是找到代码中调用微信支付的代码段:WeixinJSBridge.invoke('getBrandWCPayRequest', { &nb...

使用FastClick消除IOS点击延时提高程序的运行效率

FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器,比如Safari、Chrome、Opera等。FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。