element表格点击添加编辑及新增

最新推荐文章于 2024-07-29 14:24:01 发布
最新推荐文章于 2024-07-29 14:24:01 发布
阅读量1.5k 收藏 5
点赞数
分类专栏： vue 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41853417/article/details/121742893
版权 
<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
}</style>
</head>

<body>
    <div id="app">
        <el-row>
            <el-col span="24">
                <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                                </el-input>
                            </span>
                            <span v-else>{{scope.row[v.field]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
                                删除
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col span="24">
                <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
            </el-col>
        </el-row>

    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        //id生成工具 这个不用看 示例而已 模拟后台返回的id
        var generateId = {
            _count: 1,
            get(){return ((+new Date()) + "_" + (this._count++))}
        };
        //主要内容
        var app = new Vue({
            el: "#app",
            data: {
                master_user: {
                    sel: null,//选中行   
                    columns: [
                        { field: "type", title: "远程类型", width: 120 },
                        { field: "addport", title: "连接地址", width: 150 },
                        { field: "user", title: "登录用户", width: 120 },
                        { field: "pwd", title: "登录密码", width: 220 },
                        { field: "info", title: "其他信息" }
                    ],
                    data: [],
                },
            },
            methods: {
                //读取表格数据
                readMasterUser() {
                    //根据实际情况，自己改下啊 
                    app.master_user.data.map(i => {
                        i.id = generateId.get();//模拟后台插入成功后有了id
                        i.isSet=false;//给后台返回数据添加`isSet`标识
                        return i;
                    });
                },
                //添加账号
                addMasterUser() {
                    for (let i of app.master_user.data) {
                        if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                    }
                    let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
                    app.master_user.data.push(j);
                    app.master_user.sel = JSON.parse(JSON.stringify(j));
                },
                //修改
                pwdChange(row, index, cg) {
                    //点击修改 判断是否已经保存所有操作
                    for (let i of app.master_user.data) {
                        if (i.isSet && i.id != row.id) {
                            app.$message.warning("请先保存当前编辑项");
                            return false;
                        }
                    }
                    //是否是取消操作
                    if (!cg) {
                        if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                        return row.isSet = !row.isSet;
                    }
                    //提交数据
                    if (row.isSet) {
                        //项目是模拟请求操作  自己修改下
                        (function () {
                            let data = JSON.parse(JSON.stringify(app.master_user.sel));
                            for (let k in data) row[k] = data[k];
                            app.$message({
                                type: 'success',
                                message: "保存成功!"
                            });
                            //然后这边重新读取表格数据
                            app.readMasterUser();
                            row.isSet = false;
                        })();
                    } else {
                        app.master_user.sel = JSON.parse(JSON.stringify(row));
                        row.isSet = true;
                    }
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

<el-table
              :data="tableDatas"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
            <el-table-column prop="" label="期间" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.periodId"
                  size="mini"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="sysName" label="业绩目标值" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.performanceTarget"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  style="width: 90%"
                  size="mini"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.performanceTarget
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="platformName" label="门诊业绩" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.mzyj"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{ scope.row.mzyj }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="platformName"
              label="业绩划扣比例"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.performanceDeductRatio"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.performanceDeductRatio
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="platformName"
              label="门诊划扣业绩"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.outpatientPerformance"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.outpatientPerformance
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="context" label="门诊利润" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.outpatientProfit"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.outpatientProfit
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="" label="操作" min-width="180" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleDelete(scope.$index)"
                  class="btn-text-red"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  >删除
                </el-button>

                <el-button
                  @click="scope.row.show = true"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >编辑</el-button
                >

                <el-button
                  @click="save1(scope.row)"
                  type="success"
                  size="mini"
                  icon="el-icon-success"
                  >保存</el-button
                >
              </template>
            </el-table-column>
          </el-table>

js代码

handleAdd() {
      this.tableData.push({
        periodId: "",
        performanceTarget: "",
        mzyj: "",
        performanceDeductRatio: "",
        outpatientPerformance: "",
        outpatientProfit: "",
        show: true,
      });
    },
    handleDelete(index) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
      },
      save1(row) {
      row.show = false;
    },

在这里插入图片描述

          <el-table
        :data="dataDetail.judgmentLetterDets"
        :row-class-name="tableRowClassName"
        border
        style="width: 100%"
        max-height="500px"
        @cell-click="tabClick">
        <el-table-column
          prop="reason"
          label="原因说明"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '原因说明'">
              <el-input v-model="scope.row.reason" maxlength="300" placeholder="请输入原因" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.reason }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="judgmentAmount"
          label="判责金额(元)"
          width="120px"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '判责金额(元)'">
              <el-input
                v-model="scope.row.judgmentAmount"
                :blur="inputBlur"
                placeholder="请输入判责金额"
                size="mini"
                @blur="inputBlur"/>
            </span>
            <!-- <span v-else>{{ scope.row.judgmentAmount | fmoney }}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '备注'">
              <el-input v-model="scope.row.remark" maxlength="300" placeholder="请输入备注" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>

data:{
		dataDetail:{judgmentLetterDets:[{}]},//这里是表格数据，这里给的一个对象表示有一条空数据
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名

// 添加明细原因 row 当前行 column 当前列
        tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
   		},
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '原因说明':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '判责金额(元)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('添加明细原因', this.tabClickIndex, row, column, cell, event)
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

夜☞
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
12-28
1.表格动态添加，也可删除 添加行数 保存 xss=removed> 书名> <e
vue+element实现表格新增、编辑、删除功能
10-16
主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
总结vue elementui增加表单输入行 点击新增，添加多个输入框，点击删除同时删除多个输入框
lqy729416873的博客
07-05 7219
参考博客：https://www.cnblogs.com/zdd2017/p/11065429.html
完美实现element表格点击可修改,修改完成恢复原样
最新发布
weixin_46390865的博客
07-29 208
v-else-if=“item.label === translateTitle(‘理论库存’)”>{{ row[item.prop] }}实现element表格可修改加修改时二次确认。
vue+Element实现在表格里新增数据
weixin_48250399的博客
06-24 775
el-table-column prop="order" label="序号" width="50" type="index">1.通过isEditing字段来判断此行数据处在新增还是浏览状态。2.通过卡槽来判断数据是新增还是浏览。通过点击监听来新增数据。
element动态增加表格的列
hbw0226的博客
04-06 1623
【代码】element动态增加表格的列。
Vue+ElementUI实现点击加号动态添加
qq_42753983的博客
12-28 897
1.需求是点击加号图标往下增加，最多增加5行，最少显示一行（每条前面输入框不能为空及每条的前面输入框的值不能重复）
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
通过这样的优化，用户可以直接在表格中编辑单元格内容，点击“新增”按钮即可添加新行，而无需双击激活编辑。右侧固定列包含“移除”按钮，单击即可删除对应行。 通过这种方式，我们不仅简化了代码结构，提升了...
使用vue+element实现表格的新增、编辑（含下拉框）、删除功能（Vue开发二）
逍遥的博客
08-25 5705
几天前，需要做一个需求：新增一个xml文件时，添加数量不确定、属性相同的xml标签，想了想可以用表格做啊，属性相同，使用统一的表头，下面的属性值只是进行增删改不就行了，就类似于mysql给表里填数据一样。 可是目前似乎还没有表格的直接增删改一行的操作，那要怎么实现呢？于是，通过上网以及自己的思考，终于实现了，代码、思路以及效果图如下： 1 html部分： &lt;el-button typ...
el-table给行数据增加字段 如:index
weixin_52666327的博客
12-25 1793
<el-table :row-class-name="tableRowClassName" > methods: { // 获取当前索引值 tableRowClassName({row, rowIndex}){ // 获取分页数据 const {pageNum , pageSize} = this.config.option.page; // 分页后index也不受影响 // .
el-tag入门学习
qq_40765784的博客
06-16 6928
el-tag的入门使用
vue加elementUI写一个可以手动添加一列的表格
qqpaowenquan的博客
04-10 3916
主要功能如图： 点击添加一列后： HTML代码如下： <el-table :data="tableDatas" style="width: 100%"> <el-table-column v-for="(col,i) in cols" :prop="col.prop" :key="i"> </el-table-column> </el-t...
elementUI table 点击编辑按钮进行编辑实现示例
u012732909的博客
11-04 3290
代码(点击查看示例)： <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl..
Vue+element 商品列表、新增、编辑、删除业务实现
benlalagang的博客
08-29 2572
商品管理-商品列表的渲染-点击添加商品、编辑商品、删除商品、编辑商品-路由传参发送请求渲染数据、使用到了 el-steps 步骤条组件和 el-tabs标签页联动、Cascader 级联选择器组件vue-quill-editor富文本编辑器等知识点.........
element-ui复杂table表格-动态新增列、动态调整行、列顺序
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
01-12 1万+
目标：实现一个复杂table具有以下功能：表格行展开、全部展开、收起、全部收起；可动态配置展示哪些列、调整列展示顺序；动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部
elementui 表格新增修改，修改后清空新增表单，表格数据消失
weixin_54495706的博客
11-22 1291
背景：当使用饿了么表格时，涉及到新增修改使用同一个弹窗的时候，每次关闭弹窗需要清空表单内容，此时会发现表格数据丢失了。原因：涉及到了栈堆的问题了，可能时你给表格赋值的时候没有采用深拷贝，而是直接this.form = row。
在element的表格中添加编辑（input，输入框）
weixin_44732821的博客
08-10 8034
基于Element上在table中实现行数据单选、编辑
vue element 表格增加删除修改数据
Nice的博客
07-31 1万+
这里用到是设置一个弹出框来实现此功能，还有一种方法是直接在原来的基础上面进行修改 效果如下： 表格的table： <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> ...
element-ui如何在表格中插入图片
热门推荐
白小白的小白的博客
06-20 2万+
第一种： <el-table-column label="精品图片"> <template slot-scope="scope"> <el-popover placement="top-start" title="" trigger="hover"> <img :src="scope.row.product.cover" alt="" style="width: 150px;height: 150
Vue+Element表格操作：新增、编辑、删除实现详解
在"angluo-javascript-260953.pdf"文档中，讨论了如何使用Vue.js框架配合Element UI组件库来实现一个动态表格，该表格用于处理XML文件的新增、编辑和删除操作。主要关注点在于解决表格的增删改行功能，因为Element ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值